Можно ли использовать стопку из нискольких картинок для фона. Здесь я попробовал одну картинку, но с разным увеличением и положением. А пример в самом низу с анимацией, так что смотреть сначала на него (анимацию не зациклил). Вполне можно использовать для того, чтобы показать разные участки одной большой картинки.
Основные свойства¶
In [ ]:
# background A shorthand property for setting all the background properties
# in one declaration
# background-clip Specifies the painting area of the background
# background-image Specifies one or more background images for an element
# background-origin Specifies where the background image(s) is/are positioned
# background-size Specifies the size of the background image(s)
Define Sizes of Multiple Background Images¶
In [5]:
%%html
<style>
#example1 {
background:
url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat,
url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat,
url(http://www.w3schools.com/css/paper.gif) left top repeat;
padding: 25px;
background-size: 250px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
background-position для каждого слоя фона¶
In [7]:
%%html
<style>
#example2 {
background:
url(http://www.w3schools.com/css/img_flwr.gif) no-repeat,
url(http://www.w3schools.com/css/img_flwr.gif) no-repeat,
url(http://www.w3schools.com/css/paper.gif) repeat;
padding: 25px;
background-size: 350px, 130px, auto;
background-position: 10% 10%, 70% 50%, left top;
}
</style>
</head>
<body>
<div id="example2">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Другой вариант¶
In [13]:
%%html
<style>
#example3 {
background:
url(http://www.w3schools.com/css/img_flwr.gif) no-repeat,
url(http://www.w3schools.com/css/img_flwr.gif) no-repeat,
url(http://www.w3schools.com/css/paper.gif) repeat;
padding: 25px;
background-size: 350px, 130px, auto;
background-position: 10% 10%, 70% 50%, left top;
animation-name: example3;
animation-duration: 4s;
animation-iteration-count: 3;
/*animation-direction: reverse;*/
}
/* The animation code */
@keyframes example3 {
from {background-position: 10% 10%, 70% 50%, left top}
to {background-position: -10% 10%, 80% 30%, left top}
}
</style>
<div id="example3">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий