从零开始前端学习[31]:css3中新增加的一些背景属性

来源：互联网发布：剔除异常数据的方法编辑：程序博客网时间：2024/06/06 03:26

css3中新增加的一些背景属性

1:背景属性回顾
2:css3中新增加的一些背景属性: 2_1:background-size设置背景尺寸; 2_2background-image设置多背景; 2_3background-origin背景图片的其实域; 2_4background-clip背景颜色显示区域; 2_5background-color:中的相关属性值设置

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

背景属性回顾

background-image背景图片的设置:

background-image:url("images/1.jpg");

background-color背景颜色的设置

background-color:red;background-color:rgb(44,55,66);background-color:rgba(66,77,88,0.5);background-color:#667778;

background-repeat背景图片是否需要循环平铺

background-repeat:no-repeat;

background-position背景图片的定位，需要注意的是位置的正负

background-position:30px -30px;

background-attachment:背景是否需要固定

background-attachment:fixed;background-attachment:scroll;

详细的信息可以参考
从零开始前端学习[9]:css中的背景样式background的使用

css3中新增加的一些背景属性

background-size其实这个在之前应该是讲过的，即设置背景的尺寸大小

这个属性有三个值，一个数具体的数值，一个是cover，一个是contain

属性值属性值的含义 x ,y x表示水平方向，y表示垂直方向，值可以是像素，百分比，或者是auto cover 保持宽高比不变，保证占满盒子，但是不一定能看到完全的图片 contain 保持宽高比不变，不一定能占满盒子，但是能看到完整的图片

background-image进行多背景设置

在以前的学习过程中，很多时候我们都只是给background设置一个背景，但是css3中，可以对background设置多个背景
具体使用如下所示:

background-image: url("1.jpg"),url("2.jpg") ;  //多个背景 以“，”隔开，不限个数

.main .box2 p{ background: url("img/1.jpg")no-repeat,url("img/2.jpg")no-repeat 100px 100px;}

从上述就可以看出，其实在设置背景的时候，用逗号进行分割后，被隔离出来的每一条都是一个完整的复合属性

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}    .main div h3{text-align: center}    .main div p{width: 300px; height: 200px; margin: auto;      background: url("2.jpg")no-repeat,url("1.jpg") no-repeat 100px 100px,url("3.jpg") no-repeat 50px 50px; box-shadow: 0 0 10px 0 #000;}  </style></head><body>  <div class="main">    <div class="box1">    <h3>background-image:多背景</h3>    <p></p>  </div></body></html>

显示效果如下所示，
这里写图片描述
注意需要将其的位置给错开，否则就会重叠在一起显示了

background-origin背景图片起始域

什么叫起始领域？？？对于一个盒子来说，它是由外边距，边框，内边距以及内容部分组成，那么对于整个起始于来说，其就有四个相对的参考点
background-origin主要是有3个属性值，border-box;padding-box;content-box;

属性值属性值代表的含义 border-box 相对于边界线来说的，以边界线作为参考起始域 padding-box 相对于内边距来说的，以内边距作为初始域 content-box 相对于内容来说的，主要是以内容区域作为起始域

注意这里讲的起始域都是以最上侧开始的

使用如下:    background-origin:padding-box;    background-origin:content-box;    background-origin:border-box;

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}    .main div h3{text-align: center}    .main div p{width: 300px; height: 200px; margin: auto; background: url("2.jpg")no-repeat; box-shadow: 0 0 10px 0 #000;border: 20px solid rgba(33,55,66,0.5);padding: 10px;text-align: center}    .main .box1 p{background-origin: border-box}    .main .box2 p{background-origin: padding-box}    .main .box3 p{background-origin: content-box}  </style></head><body>  <div class="main">    <div class="box1">    <h3>background-origin:borde-box</h3>    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>  </div>    <div class="box2">      <h3>background-size:padding-box</h3>      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>    </div>    <div class="box3">      <h3>background-size:content-box</h3>      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>    </div>  </div></body></html>

这里写图片描述
注意：默认的情况之下就是根据padding-box来进行显示的

background-clip背景颜色显示区域

background-clip主要是背景颜色显示区域，而不是针对背景图片来说的，即是背景颜色从哪里开始进行显示
background-clip主要是有3个属性值，border-box;padding-box;content-box;
它会从起始显示的地方对原来的画布进行裁剪，只去显示画布内的东西，而画布之外的可能就不会在显示出来，这个需要结合background-origin来进行使用的时候会比较明显

属性值属性值代表的含义 border-box 相对于边界线来说的，以边界线作为背景颜色的起始部分，默认的就是从border开始 padding-box 相对于内边距来说的，以内边距作为背景颜色的起始部分 content-box 相对于内容来说的，主要是以内容区域作为背景颜色的起始部分

使用如下:    background-clip:padding-box;    background-clip:content-box;    background-clip:border-box;

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}    .main div h3{text-align: center}    .main div p{width: 300px; height: 200px; margin: auto; background: deeppink; box-shadow: 0 0 10px 0 #000;border: 20px solid rgba(33,55,66,0.5);padding: 10px;text-align: center}    .main .box1 p{background-clip: border-box}    .main .box2 p{background-clip: padding-box}    .main .box3 p{background-clip: content-box}    .main .box4 p{ background:url("1.jpg") no-repeat;background-origin:border-box;background-clip: content-box}  </style></head><body>  <div class="main">    <div class="box1">    <h3>background-clip:border-box</h3>    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>  </div>    <div class="box2">      <h3>background-clip:padding-box</h3>      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>    </div>    <div class="box3">      <h3>background-clip:content-box</h3>      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>    </div>    <div class="box4">      <h3>background-clip:的裁剪效果</h3>      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>    </div>  </div></body></html>

显示效果如下所示：
这里写图片描述
从上面可以看到各个属性值的效果以及background-clip的裁剪效果

background-color:中的相关属性值设置

background-color:hsl(h,l,s)调色

以前background-color的使用后面都是直接跟颜色相关的属性值，但是在这里使用的是调色的效果。
H：Hue(色调)，取值为0-360；(120绿色，240蓝色；360或0会红色)
S：saturation饱和度，取值为0-100%
L：为亮度，取值为0-100%
其使用和以前一样，直接在后面添加属性即可，这里不做过多的赘述

 .main .box1 p{background-color: hsl(145,50%,50%)}

background：-webkit-linear-gradient线性渐变

线性渐变颜色linear-gradient();

第一个值是渐变方向，后面每一个值用逗号隔开，是颜色只写颜色的时候，平均分配渐变的

background：-webkit-linear-gradient(left,deeppink 10%,yellow 30%,blue 50%)

第一个参数为渐变方向的参数，left，right，top，bottom可以单独，也可以进行两两组合使用，其实没有center属性的
后面一个参数针对上述案例中来解释：
deeppink 10%，yellow 30% 是在10%之前，颜色为deeppink，不会渐变的，在10%到30%之间会发生渐变，第二次渐变是在30%-50%之间，在30%左右的时候是不会渐变的，在50%左右的时候也是不会渐变的

background：-webkit-radial-gradient径像渐变，类似从圆心开始

background：-webkit-radial-gradient (left,deeppink 10%,yellow 30%, blue 100%)

渐变方向：right、left、top、bottom两两组合，可center，但必须单独使用,其实渐方向也是指定圆心的过程

注意:在使用时需要加上 –webkit-兼容前缀

对于以上几种简单的代码测试:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}    .main div h3{text-align: center}    .main div p{width: 300px; height: 200px; margin: auto; ; box-shadow: 0 0 10px 0 #000;}    .main .box1 p{background-color: hsl(145,50%,50%)}    .main .box2 p{background: -webkit-linear-gradient(left,red 10%,deeppink 20%,greenyellow 60%,blue 100%)}    .main .box3 p{background: -webkit-radial-gradient(center,red 10%,deeppink 20%,greenyellow 60%,blue 100%)}  </style></head><body>  <div class="main">    <div class="box1">    <h3>background-color:hsl</h3>    <p></p>  </div>    <div class="box2">      <h3>background:-webkit-linear-gradient</h3>      <p></p>    </div>    <div class="box3">      <h3>background:-webkit-radial-gradient</h3>      <p></p>    </div>  </div></body></html>

显示效果:

这里写图片描述

以上就是一些关于css3背景颜色相关的点，

欢迎持续访问博客

阅读全文

1 0