关于background的属性

我再webstorm中显示background显示出来的属性有这么多，对于我这个新手，我还是忍不住想看看这些属性

background-position: 是定义显示的位置，他的取值包括两个，分别用来定位图片在x，y轴的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv{
            width: 400px;
            height: 400px;
/*
            border-radius: 50% 30%;
*/
            border: 1px solid pink;
            background-image: url("image/00-go.png");
            background-repeat: no-repeat;
            //还有定义属性left top bottom right
            background-position: 20% 50%;
            background-position: left top;//相当于0% 0% 当div中嵌套的其他div的时候 这个图片定位并不受影响
            z-index: 1001;
            }
        .dv1{
            background-image: url("image/00-more.png");
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="dv">
    <div class="dv1" style="width: 200px;height: 200px; border: 1px solid black;"></div>

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

background-repeat:这个定义图片是否重复 repeat-x repeat-y repeat round（背景图像自动缩放直到适应且填充整个容器） space （背景图像以相同的间距平铺，且填充满整个容器或者某个方向）

background-attachment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* !**! *{
            margin: 0;
            padding: 0;
        }*/
      /*这里发现个问题  有些元素是有默认的边距的  但是background设置的图片是没有的  是紧贴着边缘位置的
      然而在body中设置img属性的时候  发现img属性是有默认的边距

      */
        .dv{
            width: 400px;
            height: 2000px;
            background-image: url("image/03-cart01.gif");
            background-repeat: no-repeat;
            border: 1px solid pink;

            /*图片默认是跟随滚动条滚动的  fixe是相对于浏览器窗口固定的*/
/*
            background-attachment: fixed;

*/
            /*
            local  背景图片是相对于元素内容固定的   内容滚动  元素也滚动
            *//*background-attachment: local;*/

            /*scroll 背景图片相对于元素固定，当元素内容滚动  图片不会滚动*/
            background-attachment: scroll;
        }
       /* body{
            background-image: url("image/03-cart01.gif");
            background-repeat: no-repeat;
        }!**!*/

    </style>
</head>
<body>
<!--
<img src="image/03-cart01.gif" alt="">
-->
<div class="dv">
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

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

background-orgin :背景图片默认是左上角也就是background-position：left top；

这个耐属性可以改变元素默认的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .dv{
            width: 300px;
            height: 300px;
            border: 20px solid pink;
            background: url("image/03-cart01.gif") no-repeat;
            background-origin: padding-box;  /*这个是默认值  这个是从补白区域开始显示背景 不包含了边框*/
            background-origin: border-box; /*这个是从边框区域开始显示   包含了边框*/
            background-origin: content-box; /*是从元素的内容区域开始显示*/
        }

    </style>
</head>
<body>
<div class="dv">
    
</div>
</body>
</html>

background-clip 裁剪区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .dv{
            width: 300px;
            height: 300px;
            border: 20px solid pink;
            background: url("image/03-cart01.gif") no-repeat;
            background-origin: border-box;
            background-clip: border-box;  /*背景被裁剪到边框盒*/
            /*background-clip: padding-box; !*背景被裁剪到内边距框*!
            background-clip: content-box; !*背景被裁剪到内容!*/
        }

    </style>
</head>
<body>
<div class="dv">

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

background-size 定义大小可以控制图片的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 80px;
            background: url("image/01-bg.png") no-repeat;
            background-size: contain;  /*把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域*/
            background-size: cover;  /*将图片缩放到正好完全覆盖所定义背景区域
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。*/
            length ：/*设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"*/
            percentage:/*以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。*/
        }

    </style>

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

background-blend-mode 定义了背景层的混合模式该属性ie都不支持了解下

normal	默认值。设置正常的混合模式。	尝试一下 »
multiply	正片叠底模式。	尝试一下 »
screen	滤色模式。	尝试一下 »
overlay	叠加模式。	尝试一下 »
darken	变暗模式。	尝试一下 »
lighten	变亮模式。	尝试一下 »
color-dodge	颜色减淡模式。	尝试一下 »
saturation	饱和度模式。	尝试一下 »
color	颜色模式。	尝试一下 »
luminosity	亮度模式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV {
    width: 290px;
    height: 69px;
    background-size: 290px 69px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, yellow 0%,white 100%), url('logo.png');
    background-blend-mode: multiply;
}
</style>
</head>
<body>

<div id="myDIV">
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
</div>

<p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

上面这个混合模式做个了解，因为在IE里面还没有一个版本支持过，这个模式相当于photoshop中的图层叠加的效果。

关于background的属性

猜你喜欢