CSS基础-background的那些属性

background的那些属性

background:背景的意思
常用的六个属性

1.background-color:背景颜色
2.background-image:背景图像
3.background-position:图片位置
4.background-repeat:图片是否重复
5.background-attachment:图片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;

疑惑点1:图像和颜色到底是从边框开始的？还是从内容开始的？

解答：背景图像和颜色默认是从border开始铺上去的。如果没有border就从下一级开始。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #000;
        }
        #box{
            width: 100px;
            height:100px;
            background: url(../../image/1.jpg);
            padding: 50px;
            border:10px dashed 
            rgba(255,255,255,.5);/*将边框设置透明度，目的是查看是否从边框开始平铺的*/
      
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

运行效果图：
图片描述

疑惑点2:如果想设置图像开始的位置怎么办？

解答：
background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;

疑惑点3:background-position的属性值有那些写法？

    解答：定位是从border的左上角开始。background-position：x,y;

第一个值是距离左边的距离
第二个值是距离上边的距离
x:left,center,right
y:top,center,bottom

background-position：10px; 只有一个值时，默认第二个值是center
background-position：10px bottom;
background-position: bottom 10px ;当存在数值的时候，顺序写错则不显示。存在数值时顺序必须写对。要按照前面是x值，后面是y值来写。eg：background-position: 10px bottom ;才正确。
background-position: bottom right;当不存在数值的时候，顺序无所谓。

疑问4: background的复合属性如何写呢?
解答：background:先考虑是否图片重复，在考虑位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border:10px solid pink;
            padding: 50px;
            background:url(../../image/1.jpg) no-repeat center content-box;
        ;
        }
    </style>
</head>
<body>
<div class="box"></div>
<!--background:先考虑是否图片重复，在考虑位置-->
</body>
</html>


效果图为：

图片描述

background的那些属性

猜你喜欢