Фон

Материал из Russianmagic
Перейти к навигации Перейти к поиску
Zmey600-100.jpg
17661439.gif

Сайту 20 лет, 1999 — 2019.

Круглая дата!
Flagrusi.gif

https://drafts.csswg.org/css-backgrounds-3/#layering https://meta.wikimedia.org/wiki/Help:Composite_images

Trava-kasp-ulica.jpg
Zmey.jpg
Flagrusi.gif
17661439.gif
Начало!

Жми!




<div style="position: relative">[[Image:Cassiopeia constellation map.png|300px]]
<div style="position: absolute; left: 115px; top: 140px">[[Image:Locator Dot2.gif]]</div>
<div style="position: absolute; left: 140px; top: 120px">
{| style="background:transparent"
|-
|[[w:en:Gamma Cassiopeiae-variabe|Gamma Cassiopeiae-variabe]]<br>
(Cassiopeia)
|}
</div>
</div><br>



<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]] <div style="position: absolute; left: 5px; top: 25px"> {| style="background:transparent" |- |[[w:en:Sluis|Sluis]] |} </div> <div style="position: absolute; left: 50px; top: 40px"> {| style="background:transparent" |- |[[w:en:Terneuzen|Terneuzen]] |} </div><br> <div style="position: absolute; left: 100px; top: 25px"> {| style="background:transparent" |- |[[w:en:Hulst|Hulst]] |} </div> </div>





<div style="position: relative">[[Image:Map South Holland.png]] <div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div> <div style="position: absolute; left: 10px; top: 10px">[[Image:Text North Sea transparent.png]]</div> <div style="position: absolute; left: 10px; top: 50px"> {| style="background:transparent" |- |[[w:en:South Holland|South Holland]] (Netherlands) |} </div> </div>




background-image: url(flower.png), url(ball.png), url(grass1.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat;




According to these rules, the canvas underlying the following HTML document will have a “marble” background:


<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN' > <html> <head> <title>Setting the canvas background</title> <style type="text/css"> body { background: url("http://example.org/marble.png") } </style> </head> <body> <p>My background is marble.</p> </body> </html>



background: url(a.png) top left no-repeat, url(b.png) center / 100% 100% no-repeat, url(c.png) white;


div { background: padding-box url(paper.jpg) white center } div { background-color: white; background-image: url(paper.jpg); background-repeat: repeat; background-attachment: scroll; background-position: center; background-clip: padding-box; background-origin: padding-box; background-size: auto auto }


body { background: red } p { background: url("chess.png") 40% / 10em gray round fixed border-box; }


div { background-image: url(image4.png); background-repeat: repeat round; background-size: 3em auto }


div { background-image: url(image1.png); background-repeat: repeat; /* default */ background-size: auto } /* default */


p { background-image: url(chain.png); background-repeat: no-repeat round; background-size: 20% 30% }


p { background-image: url(tubes.png); background-size: 50% auto; background-origin: border-box }


div { background-image: url(plasma.png); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box }

body { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

body { /* For all UAs: */ background: white url(paper.png) scroll; /* For UAs that do fixed backgrounds: */ background: white url(ledger.png) fixed; }


h1 { /* For all UAs: */ background: silver; /* For UAs that do fixed backgrounds: */ background: url(stripe.png) fixed, white url(ledger.png) fixed; }


Обратите внимание, что стилистические изображения переднего плана могут быть предоставлены в CSS со свойством content. (Семантически-важные изображения переднего плана должны быть предоставлены в разметке документа, например, с тегом <img > в HTML.)

Фрагменты мультимедиа можно использовать для отображения части изображения. Модуль CSS Images обеспечит резервный синтаксис для графических форматов и включит дополнительные функции элементы управления для отображения изображения.

Некоторые примеры указания фоновых изображений:

body { background-image: url ("мрамор.формат SVG") }
p { фоновое изображение: нет }
div { background-image: url(tl.png), url(тр.формат PNG) }


Реализация может быть оптимизирована путем отказа от загрузки и рисование изображений, которые не видны (например, потому что они находятся позади другие, полностью непрозрачные изображения).

This example creates an infinite vertical band that remains “glued” to the viewport when the element is scrolled.

body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}