常用的background背景属性详细~~干货

小刘的前端

已于 2024-02-28 13:32:01 修改

阅读量1.4k

点赞数 4

文章标签： html 前端

于 2024-02-27 20:42:40 首次发布

本文链接：https://blog.csdn.net/weixin_74308843/article/details/136330059

版权

一、background-size 背景尺寸

1 、百分比方式：当background-size：100% 100% ；我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，注意百分比用空格隔开，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 300px;
            height: 200px;
            border: 5px solid red;
            background-image: url(./imags/3.jpg);
            background-size: 100% 100%;    
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

当background-size: 100% ; 只有一个100%时，默认背景图片x轴拉伸占满容器x轴，y轴默认叠铺方式：

2、backg-size: cover; 会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片一部分被遮住显示不全：

3、background-size: contain; 与cover相反，会将图片等比例完全展示出来，因此可能会使背景图片重复排布：

4、background-size: auto; 默认图片大小

二、background-position: 0 0; 调整背景图片位置，单位px；常配合使用在精灵图。

三、background-repeat 平铺方式，默认平铺填满r容器。

.box1{

width: 300px;

height: 200px;

border: 5px solid red;

background-image: url(./imags/搜索.png);

margin: 20px;

}

background-repeat: no-repeat; 不重复，只铺一张；

background-repeat: repeat-x; 铺满容器x轴；repeat-y同理。

background-repeat: space; 图片向两端对齐以填满容器，多余的空间用空格代替：

background-repeat: round; 与space类似，不同的是多余的空间通过拉伸图片填满：

小刘的前端

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
常用的background背景属性详细~~干货

background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式：当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
复制链接

扫一扫