Как связать изображения Unsplash в HTML и CSS

Если вы читаете этот блог, я полагаю, вы уже знаете, что такое Unsplash, а если не знаете. Unsplash — это сайт с бесплатными стоковыми фотографиями. Unsplash позволяет загружать изображения прямо на ваш компьютер или связывать изображения с вашим блогом.

В этом сообщении блога вы узнаете, как связать изображения из Unsplash со своей таблицей стилей HTML или CSS.

Связывание изображения Unsplash с тегами HTML.

После создания тега HTML вставьте изображение `url` в атрибут `src` в коде HTML.

Unspash требует ключевого слова `source` перед `unsplash.com`.

Пример 1

<main class="image__wrapper">
 <img src="https://source.unsplash.com/" alt="" width="300" >
</main>

Затем перейдите в Unsplash и выберите любое изображение по вашему выбору.

Нажмите на изображение, которое вы хотите связать с вашим проектом.
Скопируйте id изображения из адресной строки браузера и вставьте его после косой черты, как показано ниже.

Пример 2

<main class="image__wrapper">
 <img src="https://source.unsplash.com/3tYZjGSBwbk" alt="" width="300" >
</main>

Предварительный просмотр в браузере

Связывание изображения Unsplash с правилом CSS

Процесс остается прежним. После того, как вы создали правило CSS, добавьте изображение в свойство `background` или `background-image`, как показано ниже.

Пример 3

<main class="image__wrapper">
 <img src="" alt="" width="" >
</main>
main {
 background:url('https://source.unsplash.com/3tYZjGSBwbk');
 width: 300px;
 height: 400px;
 background-position: center;
 background-repeat: no-repeat;
 background-origin: content-box;
 background-size: cover;
}

Когда вы решите использовать CSS для ссылки на свое изображение, не используйте тег `img` или любые другие пустые теги, так как это не сработает. это связано с тем, что тег `img` или пустые теги являются автономными элементами и не имеют фона.

Не используйте теги Img для выбора изображений в CSS

Вместо этого используйте непустой тег

Подведение итогов

Мы узнали о Как связать изображения Unsplash с помощью HTML и CSS и обсудили.

Связывание изображения Unsplash с тегами HTML.
Связывание изображения Unsplash с правилом CSS

Хорошо! Мы подошли к концу этого урока. Спасибо, что нашли время, чтобы прочитать эту статью до конца. Не стесняйтесь задавать вопросы. с удовольствием отвечу. Вы можете найти меня в Твиттере и других социальных сетях @ocxigin. или напишите мне по адресу [email protected]

Ура!

Как связать изображения Unsplash в HTML и CSS