We know that there is a very important attribute in CSS3, the bachground-size attribute. Its function is to define the size of the background image. There are 5 values, auto, pixel value, percentage, cover, and contain. Today I will teach you how to use the bachground-size attribute.
background-size:auto, the default value, fills the element with the size of the image itself, adjusts its own proportion according to the size of the element, and does not deform the image.
CSS3 about the background-size attribute
1.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>2. The size of the background image itself—width: 200px, height: 133px. The rendering of the above code is as follows:
Pixel values, such as 30px 50px, respectively represent width height
CSS3 about the background-size attribute
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>I believe you have read these cases You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Tutorial on using the transform attribute in Css3
Detailed introduction to the border-image attribute in Css3
Several ways to position in front-end projects
The above is the detailed content of A detailed introduction to the background-size property in CSS3. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
