Как да направите няколко фонови изображения CSS

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

Това може да бъде полезна в много случаи, както и точки. По-специално, използването на псевдо-елементи в тази област, тъй като те са много гъвкави в параметрите.

Множество от фонови изображения

Не е да се създаде звено в рамките на блока, най-лесният начин да се добави един ред на правилата към основния елемент и по този начин се получи желания резултат. Можете да го помисли за кратко възможности, особено след като елиминира необходимостта да се изкачи отново в изходния код. Ще бъде направено всичко единствено с помощта на CSS.

Трябва да посочите допълнителни параметри чрез отделните имоти: позиция, повторение, размер, ако е необходимо, дори цвят. Също така имайте предвид, че всички параметри са написани разделени със запетаи, в същия ред, в който номера са на изображението.

В последния детайл. Всички код може да бъде намалено чрез използване на само един универсален фон собственост. Кодът на проба е втори вариант, който показва как се прави.

Wallpaper от псевдо

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

Обяснение. Всъщност, всичко е много просто. Основният елемент по обичайния начин ние се на заден план. Тогава там е ключова позиция имот: роднина. която определя зона за преместване на друг елемент, разположен на основния елемент и като функция позиции: абсолютен; ,

Вместо друг елемент, въпреки че технически, той отива като отделен домейн с помощта псевдо. Ние искаме абсолютна позиция и позицията на точното място за нас.

Вижте също:

CSS ефекти за копчета

CSS бутон. Кратки ръчни примери

CSS стил на мишката. собственост на курсора

Трансформация CSS: Наденица не е дете - ефектът от разклащане (CSShake)