首页  >  文章  >  web前端  >  css背景有关的属性详细介绍

css背景有关的属性详细介绍

高洛峰
高洛峰原创
2017-03-17 10:10:261819浏览

印象中css控制背景的就一个background,但是background是一个复合属性

它包括:

除了这些,多背景、渐变、遮罩,我也把他们归到背景里吧。

一个个看看吧-0-。

开头说了,我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成:

 .p{
 background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
 }

 不知道大家是不是也像我这样写啊。很简单吧,背景颜色、背景图片、是否重复、定位4个属性连着写。


下面说其他属性

背景的定位区域(background-origin):值是关键字,有3个

.div{
        width: 400px;
        height: 200px;
        padding: 20px;
        border:10px solid rgba(255,255,255,.2);
        background: #000 url("1.jpg") no-repeat;
        background-origin:border-box;
        /*background-origin:padding-box;*/
        /*background-origin:content-box;*/
    }
  • border-boxcss背景有关的属性详细介绍

  • padding-boxcss背景有关的属性详细介绍

  • content-boxcss背景有关的属性详细介绍

以上就是background-origin的效果,但是貌似好像跟我想要的有那么点区别,底边跟右侧在padding、content的时候还是有背景图,而且啊好像对背景颜色(#000)没起作用

补充:它能决定背景定位的起点。

背景的定位区域(background-origin):值是关键字,也有3个

.div{
    width: 400px;
    height: 200px;

    padding: 20px;
    border:10px solid rgba(0,0,0,.1);

    background:#000 url("1.jpg") no-repeat;
    /*background-clip:border-box;*/
    /*background-clip:padding-box;*/
    background-clip:content-box;
}

 

  • border-box:css背景有关的属性详细介绍

     

  • padding-box:css背景有关的属性详细介绍

     

  • content-box:css背景有关的属性详细介绍

     

以上就是background-clip的效果,感觉比background-origin好那么点,哈。

多个背景图

以前在一个容器(p)里,实现多层背景,只能在容器里多写几个子元素,然后在把子元素定位。简单点让设计给出账图,直接糊上去完事(我经常干的事,哈哈)。

css背景有关的属性详细介绍

现在实现上边的效果,只要一个p就可以了。链接:demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            width: 240px;
            height: 150px;
            border:1px solid #000;
            
            background: url("1.jpg") no-repeat left top,
                        url("2.jpg") no-repeat left bottom,
                        url("3.jpg") no-repeat right bottom;
            background-size:100px auto, 100px auto, 100px auto;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

多个背景

 

渐变:作用在background-image上

线性渐变:

  • -webkit-linear-gradient(起点,color1,color2,...,colorN);

    • css背景有关的属性详细介绍

  • -webkit-linear-gradient(起点[方向],color1 定位,color2 定位,...,colorN  定位);

    • css背景有关的属性详细介绍

 渐变参数-起点:关键字、百分比、像素、角度(逆时针旋转)

 渐变重复:-webkit-repeating-linear-gradient(起点,color1 定位,color2 定位,...,colorN  定位);

css背景有关的属性详细介绍

css背景有关的属性详细介绍

 

径向渐变:参考

  • radial-gradient(position,shape,size,color);

    • position:定义径向渐变的圆心位置

    • shape:定义径向渐变的形状

    • size:确定径向渐变的结束形状大小

    • color:颜色 

  • css背景有关的属性详细介绍

  • css背景有关的属性详细介绍

  • css背景有关的属性详细介绍

  • 图中的at前的2个值是渐变大小(就是控制渐变形状的),at后的两个值是圆心

     

 重复径向渐变:repeating-radial-gradient

  • css背景有关的属性详细介绍

     

  

遮罩:-webkit-mask

div{
    /* 要配合背景使用 */
    background:url("1.jpg") no-repeat 50% 50%/100% 100%;
    -webkit-mask: url(1.png) 30px 10px/10px 10px;
}

css背景有关的属性详细介绍

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

        body{
            background: #000;
        }
        div{
            width: 400px;
            height: 300px;
            border:12px solid #000;/* 没起作用 */
            background:url("1.jpg") no-repeat 50% 50%/100% 100%;
            -webkit-mask: url(1.png) 30px 10px/10px 10px;
        }
    </style>
</head>
<body>
<div></div>


</body>
</html>

 图片大小:background-size

  • 关键字:cover 等比缩放,保证填满容器,(配合背景定位,就实现图片居中了)

  • 关键字:contain 等比缩放,容器可能会有缝隙

  • 数值:x-控制图片宽, y-控制图片高

 

 

以上是css背景有关的属性详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn