img и свойство background
Здравствуйте, в этой статье поговорим о теге img и свойстве background.
Тег <img > нужен для отображения изображений на веб-странице.
Поддерживает форматы GIF, JPEG или PNG. Форма записи : <img src="URL" >.
Src это адрес изображения, изображение может быть взято с интернет
источника или со своего устройства. Тег <img > это не парный тег и
закрывающий тег не требуется. С помощью одного тега <img > можно
вставить только одно изображение.
- <body>
<img src="foto.png">
</body>
Если нам нужно вставить несколько изображений каждый раз прописывает новый тег.
- <body>
<img src="foto1.png">
<img src="foto2.png">
<img src="foto3.png">
<img src="foto4.png">
</body>
- Тег <img > имеет много атрибутов таких как align, alt, border, height, hspace, ismap, longdesc, lowsrc, src, vspace, width, usemap.
Основные это src, alt, width, height, border и align. Плюс тега <img > в том что для изменения размера картинки или оформления рамкой нам не нужно писать дополнительный стиль, так как он имеет атрибуты позволяющие это сделать.
<img src="foto.png" width="255px" height="150px" border="5px" align="top">
Часто картинки используют как ссылки для перехода на другой сайт или вывода определенной информации просто заключив тег <img > в теге <a>.
<a href="https://www.google.com.ua">
<img src="foto.png">
</a>
Свойство background это свойство стиля (CSS). Задает задний фон для блока. Фон можно задать как из палитры цвета так и картинкой. Возьмем для примера тег <div> котором у нас есть текст.
<div class=”block”>
<p class=”text”>Дорогие друзья, выбранный нами инновационный путь влечет за собой процесс внедрения и модернизации всесторонне
сбалансированных нововведений</p>
</div>
Для того чтоб задать фон тегу <div> используем класс class=” block ”. .block {background: green;} Также мы можем изменить фон текста. Зададим тегу <p> класс class=” text ” .text {background: blue;}
Итак, у нас получилось, что основной блок имеет фон зеленого цвета, а текст синий фон. Разберем пример с фоновым изображением. Например нам нужно вставить картинку на задний фон для всего сайта. И в этом нам тоже поможет свойство background.
background: url(image.png);
Разница между изображением и цветным фоном в атрибуте url. Без него изображение не сработает.
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
