Css-unit %-background-size-background-position-,
(-1) Preface
I am using chrome49. This article is for future preparation. The adjustment of importance and the overall graduation materials led to the recent absence of JQuery and H5 special effects, and later I had to watch them at night.
(0) PreparationDiv's length and width are both pxs. For example, we set 1.jpg as the background image and add the style background-repeat: no-repeat.
(1) background-size: 100% 100%;Scale the background image size. The Base Value of "%" in "background-size: 100% 100%;" is the div width and height. Therefore, the image is filled with the entire div.
(2) background-position: 0% 10%;When the value of background-position is %, the base value is the absolute value of the horizontal and height difference between the image and the div. Vertical is used as an example to show only positive values.
A. The image is not div largeBackground-size: 100% 80%; then, the function of background-position: 0% 10% is to make the image 6 PX away from the top of the div, calculated as (300-300*0.8) * 0.1 = 6, this is equivalent to pushing down an image, so the background-position: 0% 100%; always keeps the bottom of the image close to the bottom of the div
B. The image is as big as the divBackground-size: 100% 100%; here, no matter the background-position: 0% 10%; the 10% setting in does not work.
C. The image is larger than div.Background-size: 100% 120%, then the background-position: 0% 10% function is to make the image-6px from the top of the div, the calculation method is (300*1.2-300) * 0.1 = 6, it is equivalent to pushing up an image. So the background-position: 0% 100%; always keeps the bottom of the image close to the bottom of the div
(3) small cases<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Title> for life </title>
<Style type = "text/css">
*
{
Margin: 0;
Padding: 0;
}
# Lol
{
Width: 300px;
Height: 400px;
Background-image:-webkit-linear-gradient (90deg, # be1e1e, # be9b1e, #1ebe21, #1ebeb5, # 1e24be, # ba1ebe, # be1e1e );
Border: 1px solid red;
Background-repeat: no-repeat;
Background-size: 100% 700%;
Animation: dnf 1 s infinite alternate;
}
@ Keyframes dnf
{
100%
{
Background-position: 0% 100%;
}
}
</Style>
<Script type = "text/javascript">
</Script>
</Head
<Body>
<Div id = "lol"> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
