Множественные фоны — CSS | MDN
С помощью CSS3 вы можете применить несколько фонов к элементам. Они будут располагаться поверх друг друга: фон, заданный первым — в самом верху, последний фон — в самом низу.
Задать множественные фоны легко:
.myclass {
background: background1, background 2, ..., backgroundN;
}
Вы можете сделать это сокращённым background свойством и отдельными свойствами кроме background-color. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
HTML
<div></div>CSS
.multi_bg_example {
width: 100%;
height: 400px;
background-image: url(https://mdn.
mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
(If image does not appear in CodePen, click the TIdy button in the CSS section)
background-repeat и background-position) применяется к соответствующим фонам. Например первое значение свойства background-repeat применяется к первому фону, и т.
д.Размытие фона средствами CSS
В CSS3 есть множество новых свойств, которые могут значительно ускорить вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из которых сегодня предлагается поговорить.
Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на
странице. Зачастую для его создания используется jQuery-библиотека
Пример простейшей разметки:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Blur</title> <link href="style.css" rel="stylesheet"/> </head> <body> <main> <div></div> <div> <h3>Welcome to our website!</h3> </div> </main> </body> </html>
Итак, задан родительский div с классом wrapper, служащий контейнером для двух
вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur —
изображение, к которому нужно применить эффект размытия.
Обратимся к стилям.
.wrapper {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
}
.inner-wrapper,
.blur {
position: absolute;
width: 500px;
height: 300px;
left: 0;
top: 0;
bottom: 0;
right: 0;
}Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на
одном уровне. Дело в том, что эффект размытия будет применяться и к тексту
приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением
блоков относительно друг друга при помощи .blur:
.inner-wrapper {
z-index: 100;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.blur {
z-index: 99;
background-image: url(image.png);
background-size: cover;
background-repeat: no-repeat;
}На данный момент получаем простейшую страничку с картинкой и текстом:
Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:
<svg version="1. 1" xmlns="http://www.w3.org/2000/svg">
<filter>
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
1" xmlns="http://www.w3.org/2000/svg">
<filter>
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр
всего один: тот, что определён под id blur. Вот как должен быть преобразован
css-код для получения эффекта размытия:
.inner-wrapper { z-index: 100; color: #fff; text-align: center; text-shadow: 0 0 5px rgba(0,0,0,.5); } .blur { z-index: 99; background-image: url(image.png); background-size: cover; background-repeat: no-repeat; -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); filter: url('blur.svg#blur'); }
А вот и итоговый вариант с применением эффекта размытия:
Единственный недостаток: нечёткие границы размытия, которые выходят за пределы
родительского элемента. Часто такой побочный эффект может быть
нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden.
Слои на задний/передний план при помощи CSS: z-index
В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS. А точнее при помощи свойства z-index.
Скорее всего, каждый из вас в детстве делал Аппликации. Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы — дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.
HTML с помощью CSS позволяет получить аналогичную картинку, только на веб-страничке. Каждый из элементов можно наклеить поверх других при необходимости.
Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер.
Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute, relative или fixed. Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom, top, left, right. Но не только в этом случае может понадобиться расставление z-index. Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.
Если вы не указываете z-index, то для всех элементов по-умолчанию он равен 0. z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).
Вот как может выглядеть код CSS-стилей для 3 <div> с заданными z-index, так что они располагаются по принципу, чем первее <div> в коде, тем он более на переднем плане (противоположно принципу по-умолчанию), это в Демо пример №2:
div {position: absolute; text-align:center; font-weight:bold;}
div. first {width:100px; height:100px; background:#006600; left:0; top:50px; z-index:2;}
div.first2 {width:100px; height:100px; background:#990000; left:50px; top:100px; z-index:1;}
div.first3 {width:100px; height:100px; background:#99FF66; left:100px; top:150px; z-index:0;}
first {width:100px; height:100px; background:#006600; left:0; top:50px; z-index:2;}
div.first2 {width:100px; height:100px; background:#990000; left:50px; top:100px; z-index:1;}
div.first3 {width:100px; height:100px; background:#99FF66; left:100px; top:150px; z-index:0;}Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).
Вы можете просмотреть эффект в Демо:
Типы носителей
Типы носителейОдной из наиболее важных особенностей таблиц стилей является то, что они указать, как документ должен быть представлен на разных носителях: на экран, на бумаге, с синтезатором речи, с устройством Брайля, и т.п.
Некоторые свойства CSS предназначены только для определенных носителей (например,
свойство ‘page-break-before’
применяется только к страничным медиа).
В настоящее время есть два способа указать зависимости носителей для таблицы стилей:
- Укажите целевой носитель из таблицы стилей с помощью правил @media или @import.
Пример (ы):
@import url ("fancyfonts.css") экран; @media print { / * здесь находится таблица стилей для печати * / } - Укажите целевой носитель на языке документа. Для
Например, в HTML 4 ([HTML4]) атрибут «media» в ССЫЛКЕ
element определяет целевой носитель внешней таблицы стилей:
01 // EN">
<ГОЛОВА>
Ссылка на целевой канал <ТЕЛО>Тело ...