В этом посте кратко объясняется метод добавления изображения с URL-адреса.
Как добавить изображение с URL-адреса в HTML/CSS?
В HTML/CSS доступны два метода добавления изображения с использованием URL-адреса, который указан ниже:
- Способ 1: добавить изображение с помощью элемента
в HTML
- Способ 2: добавить изображение с помощью свойств CSS в HTML
Способ 1: добавить изображение с помощью элемента ![]()
“ <изображение> » — это один пустой элемент, который не имеет дочернего содержимого и завершающего тега. “ источник ' и ' все ” — это два ключевых атрибута, которые используются внутри тега “ ”.
Давайте посмотрим на приведенные ниже инструкции, чтобы добавить изображение с помощью элемента !
Шаг 1: Создайте контейнер div
Сначала создайте контейнер div, используя « <дел> ' ярлык. Затем вставьте « класс » и присвоить имя классу по желанию.
Шаг 2: Вставьте заголовок
Затем используйте необходимый тег заголовка из « ' к ' ' ярлык. Например, мы будем использовать тег
и добавлять конкретный текст в качестве заголовка внутри открывающего и закрывающего тегов.
Шаг 3: Добавьте изображение, используя URL
Шаг 3: Добавьте изображение, используя URL
После этого добавьте « <изображение> ” и вставьте перечисленные ниже атрибуты внутрь тега изображения:
- “ источник Атрибут используется для добавления медиафайла. Для этого запустите нужный веб-браузер и скопируйте URL-адрес нужного изображения.
- Затем укажите URL-адрес в качестве значения параметра « источник атрибут.
- Следующий, ' все ” используется для добавления имени к изображению, когда оно по какой-то причине не отображается.
- “ высота Свойство указывает высоту элемента в соответствии с заданным значением.
- “ ширина ” используется для установки ширины элемента:
< h2 > Добавить изображение с URL < / h2 >
< изображение источник знак равно 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' все знак равно 'Изображение!' высота знак равно '400 пикселей' ширина знак равно '300 пикселей' / >
< / див >
Согласно приведенному ниже выводу, указанное изображение было успешно добавлено:
Способ 2: добавить изображение с помощью свойств CSS в HTML
Разработчики также могут добавить изображение из URL-адреса с помощью CSS. изображение на заднем плане КС. для этого выполните следующие шаги.
Шаг 1: Вставьте заголовок
Сначала вставьте текст заголовка с помощью открывающего и закрывающего тега
.
Шаг 2: Создайте контейнер div
Затем создайте контейнер div, используя тег
<класс деления знак равно 'img-контейнер' > >
Шаг 3: Доступ к контейнеру
Теперь получите доступ к классу через точечный селектор « . ” и имя класса, которое было создано ранее.
Шаг 4. Добавьте изображение с помощью CSS-свойства background-image.
После этого примените перечисленные ниже свойства CSS, чтобы добавить изображение из URL-адреса внутри класса:
.img-контейнер {высота : 400 пикселей ;
ширина : 250 пикселей ;
размер фона : содержать ;
Изображение на заднем плане : URL ( https : //картинки .pexels .com/фотографии/ 2260800 /pexels-фото- 2260800 .jpeg? авто знак равно сжать&CS знак равно тинисргб&в знак равно 1260 &час знак равно 750 &dpr знак равно один )
}
В приведенном выше коде:
- “ высота ” используется для установки высоты элемента.
- “ ширина ” используется для указания размера ширины элемента.
- “ размер фона ” используется для установки размера элемента фона.
- “ изображение на заднем плане » добавляет изображение на обратной стороне элемента. С этой целью « URL() ” используется для добавления изображения и вставки URL-адреса изображения в функцию ” () ».
Вывод
Вы узнали о различных методах добавления изображений по URL-адресу.
Заключение
Чтобы добавить изображение из URL-адреса, разработчики могут использовать « <изображение> ' ярлык. Затем вставьте « источник » и назначьте URL-адрес в качестве значения «src». Кроме того, пользователь может добавить изображение из URL-адреса с помощью CSS « изображение на заднем плане ' имущество. В этой статье изложены методы добавления изображения из URL-адреса в HTML/CSS.