Альтернативный текст
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик или другую иконку – это зависит от браузера. Чтобы такого не было, мы можем дать подсказку, описать то, что изображено на картинке. Для этого используется параметр alt, который прописывается к тегу <img> в HTML-файле. Мы еще не говорили об этом, но здесь нет ничего сложного. Картинка загружается аналогично тому, что мы делали при использовании свойства «background-image».
Таким образом, если мы хотим добавить картинку к body, необходимо прописать следующие строчки кода:
<body>
<img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">
</body>
Также стоит сказать, что параметр alt позволяет поисковым системам отображать вашу фотографию. Если пользователь будет гуглить «Утренний завтрак», то в фотографиях поисковика будет ваша картинка.
Изображение в качестве ссылки
Через HTML-код мы также можем сделать так, чтобы картинка стала кликабельной. Это будет полезно, когда вы добавляете иконку социальной сети и хотите, чтобы пользователь по клику переходил на страницу соцсети.
Для этого в коде необходимо добавить тег <a href=»…»></a>, где href – ссылка на страницу. Внутри этого тега необходимо добавить картинку.
В результате должно получиться следующее:
<body>
<a href="vk.com"></a>
<img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">
</body>
Создание полупрозрачного фона в CSS
На сайтах полупрозрачность достигается за счет свойства opacity или задаваемого для фона формата цвета RGBA. Использование такого параметра поможет вам сделать текст более читабельным на фоновом изображении.
Например, чтобы сделать изображение на 50% тусклее, в CSS необходимо прописать следующее:
opacity: 0.5;
Значение opacity прописывается к классу так же, как мы это делали с другими свойствами.
Создание текстурного фона
Если сделать фон страницы в HTML в виде красивого рисунка, то за «красоту» приходится платить большим весом изображения, который может составлять несколько мегабайт.
Если пользователь использует высокоскоростной интернет, то такой вес не будет сильно тормозить загрузку страницы. А вот при подключении к мобильному интернету фон будет загружаться довольно долго. Избежать такой проблемы поможет использование текстурного фона.
Для создания рисунка текстуры применяют компактное изображение, которое даже при многоразовом повторении будет загружаться только раз.
К примеру, чтобы установить темный фона для страницы заходим в «Фотошоп» и создаем картинку в форме полоски, длина которой 1,2 тыс. пикселей, а шириной 15 пикселей. После этого используем простой черно-белый градиент, а затем сформированную текстуру устанавливаем на сайт:
<body style=»background-image: url(1.png);color: rgb(0,51,204)»>
Стоит сделать подложку сайта более разнообразной, что будет привлекательным для пользователей. Несмотря на то, что текстуры кажутся очень простыми, они довольно красиво смотрятся, что и объясняет их популярность. Для установки на сайт текстуру следует выгрузить в папку image. Для этого нужно провести некоторые операции с настройками в административной панели сайта. Необходимо внести код:
body {
background-color: #537759;
background-image: url(images/pattern.png);
}
Как вы видите, в таком коде присутствует параметр по установке оттенка (зеленый) и параметр, который подключает зеленую текстуру.
Повторение фонового изображения.
Как уже говорилось выше, если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается «плиткой». Свойство background-repeat — регулирует повторение фонового изображения.
Возможные значения:
- no-repeat — запретить повторение, показать только одно изображение.
- repeat — повторять изображение (по умолчанию).
- repeat-x — повторять только по горизонтали.
- repeat-y — повторять только по вертикали.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Повторение фонового изображения</title></head><body style=»background-image: url(fon.jpg); background-repeat: repeat-x«><samp style=»background-color: #ffffff»>Изображение повторяется только по оси х.</samp></body></html>
смотреть пример
Фоновое изображение.
Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.
Возможные значения background-image:
- url — путь к файлу с изображением.
- none — изображение отсутствует. (по умолчанию)
Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.
В примере ниже в качестве основного фона (элемент body) используется одно графическое изображение, а для блока div другое, возможность использования различных фоновых изображений для разных элементов страницы позволяет решать практически любые дизайнерские задумки.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Фоновое изображение</title><style type=»text/css»>body{background-image: url(fon.jpg);}div{background-image: url(fon1.gif);border: 5px double #245404; height: 250px; }p{text-align: center;color: #008040;font: bold 24px Arial;}</style></head><body><p>Страница с фоновым изображением</p><div><p>Блок с фоновым изображением</p></div></body></html>
смотреть пример
Если рисунок не заполняет собой весь фон элемента, то он выкладывается «плиткой».
Повторение изображения
Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут
намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок.
Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его
размеры.
Стиль:
| 27282930313233 |
#div4
{
width: 1100px;
height: 800px;
border: 1px solid Red;
background-image: url("image.jpg");
}
|
HTML код:
| 40 |
<div id="div4"></div> |
Чтобы изменить повторение изображения, используется свойство background-repeat.
Оно принимает такие значения:
background-repeat: repeat — повторяется по горизонтали и по вертикали
(по умолчанию)
background-repeat: repeat-x — повторяется только по горизонтали
background-repeat: repeat-y — повторяется только по вертикали
background-repeat: no-repeat — не повторяется
background-repeat: inherit — значение принимается от родительского элемента
Изменим фон блока так, чтобы изображение не повторялось.
| 33 |
background-repeat: no-repeat; |
В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства
background-position могут быть не только слова, но и два числа в
единицах измерения CSS,
указанные через пробел. Это отступы изображения от левого верхнего угла блока.
Попробуйте разные способы повторения изображения.
Background как свойство в каскадных стилевых таблицах
Он задается или в отдельном файле с css стилями, или в элементе <style>. С помощью данного свойства можно устанавливать фоновые рисунки или цвет, указывать начальное местоположение на странице, задавать повторяющиеся и фиксированные изображения. Для большей наглядности я оформил определения в таблице.
| Параметры | Предназначение |
| background-attachment | Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit |
| background-image | Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка |
| background-position | Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях |
| background-repeat | Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space |
| background-color | Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка. |
| inherit | Наследует все характеристики родительского элемента |
Фиксация фонового изображения.
Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.
Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать одно из двух значений:
- fixed — фиксированный фон.
- scroll — подвижный фон (по умолчанию).
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Фиксация фонового изображения</title><style type=»text/css»>body{background-image: url(fon.jpg);background-attachment: fixed;}h1{color: #0000ff;font: bold 28px;}div{line-height: 2;white-space: pre;color: #0000ff;font-size: 24px;}</style></head><body><h1>Песенка мамонтенка</h1><div>По синему морю, к зелёной землеПлыву я на белом своём корабле.… … …… … …Музыка: В. Шаинский Слова: Д. Непомнящий</div></body></html>
смотреть пример
Background attachment #
Browser support
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
The property enables you to modify the fixed position behavior of background images (images part of a background layer) once the layer is visible on a screen.
It accepts 3 keywords: , , and .
The default behavior of the property is the initial value of . When more space is needed, the images move with that space within the background layer determined by the bounds of the CSS box.
Using the value fixes the position of background images to the viewport.
Once the space of the background layer images originally takes up needs to be scrolled (or rendered) offscreen, images within the background layer stay fixed in the original position the background layer enabled them to be until the entire layer is scrolled off screen by the viewport.
The keyword enables the position of background images to be fixed relative to the element’s contents. Background images now move along the space they occupy as that space renders inside and outside the bounds of the CSS box (usually due to scrolling, 2D, or 3D transformations).