A detailed introduction to the background-size property in CSS3-CSS Tutorial-php.cn

A detailed introduction to the background-size property in CSS3

php中世界最好的语言

Release： 2017-11-30 16:34:49

Original

2699 people have browsed it

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

<!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>

Copy after login

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>

Copy after login

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!