background-size不同属性及其含义
时间: 2023-11-20 20:15:20 浏览: 36
background-size是CSS中用于设置背景图片大小的属性,它有以下几个不同的属性及其含义:
1. cover:将背景图片等比例缩放以完全覆盖背景区域。如果背景图片的宽高比与背景区域的宽高比不同,会有部分图片超出背景区域。
2. contain:将背景图片等比例缩放以完全包含在背景区域内。如果背景区域比背景图片大,背景图片会被缩小以适应背景区域。
3. length:设置背景图片的宽度和高度,可以使用具体的像素或百分比值。
4. auto:设置背景图片的宽度或高度为自动计算,根据背景区域的大小和背景图片的宽高比计算出最佳大小。
5. percentage:设置背景图片的宽度或高度为背景区域宽度或高度的百分比值。
使用background-size属性可以控制背景图片的大小和填充方式,从而实现不同的效果,如背景图片的缩放、裁剪、平铺等。
相关问题
css background-size 属性
background-size属性用于设置背景图像的大小。它可以接受不同的值来指定图像的尺寸。
以下是一些常见的background-size属性值及其含义:
1. auto:默认值,保持图像的原始尺寸。
2. length:可以使用具体的长度值来指定图像的宽度和高度。例如,background-size: 200px 300px; 将图像的宽度设置为200像素,高度设置为300像素。
3. percentage:可以使用百分比值来指定图像的宽度和高度。例如,background-size: 50% 75%; 将图像的宽度设置为父元素宽度的50%,高度设置为父元素高度的75%。
4. cover:将图像缩放到完全覆盖背景区域,可能会裁剪图像。如果图像的宽高比与背景区域不匹配,图像可能会被拉伸以适应背景区域。
5. contain:将图像缩放到完全适应背景区域,可能会在图像周围留有空白。如果图像的宽高比与背景区域不匹配,图像将按比例缩放以适应背景区域。
以下是一个示例,展示了如何使用background-size属性:
```css
div {
background-image: url("example.jpg");
background-size: cover;
}
```
这个示例将一个名为example.jpg的图像作为div元素的背景图像,并使用cover值将图像缩放以完全覆盖div元素的背景区域。
css的background-attachment的属性及演示
background-attachment属性指定背景图像是否固定或随着页面滚动而移动。它有以下几个值:
1. scroll(默认值):背景图像随着页面滚动而移动。
2. fixed:背景图像固定不动,不随着页面滚动而移动。
3. local:背景图像相对于元素内容固定,不随着页面滚动而移动。
以下是演示:
```html
<!DOCTYPE html>
<html>
<head>
<title>Background Attachment Demo</title>
<style type="text/css">
body {
height: 2000px;
}
.bg-scroll {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
}
.bg-fixed {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.bg-local {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: local;
height: 500px;
overflow: scroll;
}
.content {
padding: 50px;
color: #fff;
text-align: center;
font-size: 2em;
}
</style>
</head>
<body>
<div class="bg-scroll">
<div class="content">
Scroll Background
</div>
</div>
<div class="bg-fixed">
<div class="content">
Fixed Background
</div>
</div>
<div class="bg-local">
<div class="content">
Local Background
</div>
</div>
</body>
</html>
```
以上代码将创建三个不同的元素,每个元素都有不同的background-attachment属性。第一个元素的背景图像随着页面滚动而移动,第二个元素的背景图像固定不动,第三个元素的背景图像相对于元素内容固定,只有元素内容区域内可以滚动。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)