从零开始前端学习[31]:css3中新增加的一些背景属性
2017-10-11 22:14
971 查看
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 | 保持宽高比不变，不一定能占满盒子，但是能看到完整的图片 |
.main .box1 p{background-size: 300px 250px} /**这个大小就随意进行发挥了*/
.main .box2 p{background-size:cover}/**背景虽然平铺完整了，但是图片显示有问题，可能显示不全*/
.main .box3 p{background-size: contain} /**在一个方向上是可以显示完整的，保持宽高比不变，不一定能占满盒子，但能看到完整的图片测试对比代码:
<!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;}
.main .box1 p{background-size: 300px 250px} /**这个大小就随意进行发挥了*/ .main .box2 p{background-size:cover}/**背景虽然平铺完整了，但是图片显示有问题，可能显示不全*/ .main .box3 p{background-size: contain} /**在一个方向上是可以显示完整的，保持宽高比不变，不一定能占满盒子，但能看到完整的图片
*/
</style>
</head>
<body>
<div class="main">
<div class="box1">
<h3>background-size:300px 250px</h3>
<p></p>
</div>
<div class="box2">
<h3>background-size:cover</h3>
<p></p>
</div>
<div class="box3">
<h3>background-size:contain</h3>
<p></p>
</div>
</div>
</body>
</html>
显示对比:
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背景颜色相关的点，
欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 从零开始前端学习[32]:css3中新增加的一些文本属性
- 从零开始学习前端开发 — 17、CSS3背景与渐变
- 从零开始前端学习[29]:Css3中新增加的选择器一
- 从零开始前端学习[41]:html5中新增加的一些智能表单
- 从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影
- 从零开始前端学习[30]:Css3中新增加的选择器二
- 从零开始前端学习[19]:前端中重要的属性，定位position属性
- 从零开始前端学习[9]:css中的背景样式background的使用
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- 从零开始前端学习[54]:js中自定义标签属性和自定义属性
- 从零开始前端学习[23]:img标签的属性和水平对齐的属性vertical-align
- 前端知识学习----CSS3背景
- 从零开始学习前端开发 — 11、CSS3选择器
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- 从零开始前端学习[4]:关于html5文本文件的一些简单介绍
- 从零开始前端学习[50]:js操作标签属性,读写属性标签
- 从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法
- 从零开始学习前端开发 — 14、CSS3变形基础
- 【OC学习-31】利用KVC即键值编码来访问一些对象的属性，尽管这些属性是私有的
- 从零开始前端学习[18]:前端中重要的属性，浮动float属性