How to use background-position in CSS3
This article mainly introduces the relevant knowledge of how to use background-position in CSS3, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use background-position in CSS3. Let's take a look at it.
Div {background-position:20px40px;/*20pxfromleft&20pxfromtop*/}
The problem is that we can't determine the exact location from another point, for example, from the bottom / right, we can only start from the upper left corner.
We can write: background-position:rightbottom; can also write: backgroundposition:70%/ starts with left / 80% / starts with top /
But we can't write 20px from the right and 20px from the bottom.
Let's take a look at the new background-position property
To solve this problem, CSS3 provides us with the option to determine where to start positioning and to determine zero zero point.
How can we make it happen?
We can now use css3 to write down the beginning of horizontal and vertical positions, such as the values of the lower right corner + starting point, instead of just 2 values (horizontal and vertical points of the upper left corner).
Let's create an example:
First create an empty div with some styles:
HTML:
CSS
.box {
Width:300px
Height:300px
Background-color:#ddd
Padding:10px
Border:solid3px#333
Border-radius:10px
}
Now we will add a background image with a fixed background size (a new feature in CSS3).
.box {
Background:url (image/cup.jpg) no-repeat
Background-size:150px150px
}
Finally, we will add a new background location.
First we set the horizontal starting point, for example, on the right and then we can set the distance we want, such as 20px.
Second, we set the vertical starting point, for example: after the bottom, we set the distance we need from that location, for example, 40 pixels.
New background location of CSS
.box {background-position:right20pxbottom40px;}
This is the end of the article on "how to use background-position in CSS3". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use background-position in CSS3". If you want to learn more, you are welcome to follow the industry information channel.
