Нека продължим да разгледаме използването на псевдо-елементи преди и в тази статия ще ни позволи да създадем отместването на фоновото изображение на единицата, която прозорец.
Изтеглете изходния код на тази статия може да бъде по-долу

Нека разгледаме един пример.

Това фоново изображение може да бъде поставен отдясно и
дъно, защото е с помощта на псевдо-елемент да действа като допълнителен
фон платно.

Модулът за CSS3 фон позволява това, но все още не е
внедрява в много браузъри. Техниката на псевдо-елемент също има
Допълнително предимство е в състояние да изрежете фоново изображение и дори позиция
той частично, или напълно, извън неговата опаковка.

Обърнете внимание на кутията - това е картинката с фоновото изображение, и се намира извън блока!

За изпълнение на тази цел е достатъчно проста.

Сега просто поставете блокове Разделение, за да го по-късно ние присвоите желания стил, който ще се създаде по-горе ефект.

Нищо необичайно, само DIV и текст.

На следващо място, ние трябва да отворите файл от стилове (style.css) на нашия сайт и да се регистрирате за този блок (DIV ID = "позиция кутия"), следните настройки:

Нека да разгледаме кода за стила на устройството, което може да се променя по свой вкус.

Идентификационният позиция кутия - е отговорен за начина на изобразяване, на уреда.
Идентификационният позиция кутия: преди - добавя стил да блокира "позиция кутия".

Повече ID позиция кутия:
Две първите параметри (позиция, Z-индекс) не се допират.
пълнеж - вата на текста в блок върха, надясно, надолу, наляво.
граница - на границата на блока.
цвят - цвета на текстовия блок (FFF - бяло).
фон - цвета на фона на блока (4B92C0 - синьо).
ширина - ширината на блока.

Експериментирайте с кода и да получите интересни визуални ефекти.

PS: Опитайте се да изтеглите снимка на малък площад в примера по-горе (с помощта, например, на десния бутон на мишката) - можете да го направите :) - това е една от характеристиките на псевдо-елементи.

Сходни публикации:

навигация в публикациите