css背景属性

最新推荐文章于 2022-05-18 21:19:35 发布

我拿青春赌未来~

最新推荐文章于 2022-05-18 21:19:35 发布

阅读量1.1k

点赞数 1

文章标签： css html vue.js

本文链接：https://blog.csdn.net/helongzhi/article/details/124669963

版权

本文详细介绍了CSS中关于背景样式的设置，包括如何设置背景颜色、添加背景图片、调整图片平铺方式、控制图片在元素中的位置、设定背景的范围以及设置背景图片的偏移量和大小。通过实例代码展示了各种属性的用法，帮助读者深入理解CSS背景样式的应用。

摘要由CSDN通过智能技术生成

1.设置背景颜色

background-color:颜色；

<body>
    <div class="box">

    </div>
</body>

给box设置红色背景

.box{
    width: 200px;
    height: 200px;
    background-color: red;
}

2.背景图片

background-image：url（图片来源）；

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    background-image: url(./屏幕截图\ 2022-04-02\ 145129.png);
}

如果图片较小，默认情况下是两个方向平铺显示

3.设置图片平铺方式

.background-repeat：;

repeat	默认值双方向平铺
no-repeat	不重复平铺
repeat-x	水平方向重复平铺
repeat-y	垂直方向重复平铺

no-repeat

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    background-image: url(./屏幕截图\ 2022-04-02\ 145129.png);
    background-repeat: no-repeat;
}

repeat-x

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    background-image: url(./屏幕截图\ 2022-04-02\ 145129.png);
    background-repeat: repeat-x;
}

4.设置图片在元素中的位置

background-position：;

可设置方位

top	上
right	右
left	左
bottom	下
center	中

可设置偏移量（两个值）

第一个值：水平偏移量可正(向右) 可负（向左）

第二个值：垂直偏移量可正（向下）可负（向上）

5.设置背景的范围

background-clip：；

border-box	默认值，背景色会出现在边框下面
padding-box	背景色护出现在内边距下面
centent-box	背景出现在内容区下面

html

body>
    <div class="box">

    </div>
</body>

css

.box{
    
    width: 200px;
    height: 200px;
    border:10px double black;
    background-color: red;
   
}

正常显示效果

当我们设置background-clip:;属性时

padding-box

.box{
    
    width: 200px;
    height: 200px;
    border:10px double black;
    background-color: red;
    background-clip: padding-box;
   
}

content-box

.box{
    
    width: 200px;
    height: 200px;
    border:10px double black;
    background-color: red;
    padding: 20px;
    background-clip:content-box;
   
}