09、CSS3新增背景属性
2016-08-05 14:49
387 查看
01、CSS背景属性
background:background-color:背景颜色
background-image:背景图片
background-repeat:背景重复
background-position:背景定位
background-attachment:背景固定(scroll/fixed)
02、CSS3新增背景属性
background-size 背景尺寸background-size:x y
background-size:100% 100%
background-size:cover 比例放大
background-size:contain 包含（图片不溢出）
<!doctype html><!--声明当前文档为
4000
html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{ width:400px;height:400px;background:url("http://img2.3lian.com/2014/c7/12/d/77.jpg") no-repeat;
border:2px solid red;
}
.div1{
background-size:cover;/*比例放大*/
}
.div2{
background-size:100% 100%;
}
</style>
</head>
<body><!--身体-->
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>多背景
background:url() 0 0,url() 0 100%;
background-origin 背景区域定位
border-box： 从border区域开始显示背景。
padding-box： 从padding区域开始显示背景。
content-box： 从content内容区域开始显示背景。
background-clip 背景绘制区域
border-box： 从border区域向外裁剪背景。
padding-box： 从padding区域向外裁剪背景。
content-box： 从content区域向外裁剪背景。
text:背景填充文本
no-clip： 从border区域向外裁剪背景。
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{ width:400px;height:400px;border:20px solid rgba(0,0,0,.5);padding:20px;
background:url("http://image.tianjimedia.com/uploadImages/2014/195/06/Q41XE30W9H80_1000x500.jpg") no-repeat;/*如果不设定不平铺，background-origin: padding-box/content-box的时候，边框上/padding上背景会平铺*/
background-size:100% 100%;
float:left;margin-left:10px;
}
#div1{
background-origin:border-box;/*background-origin 背景区域定位
border-box： 从border区域开始显示背景。
padding-box： 从padding区域开始显示背景。
content-box： 从content内容区域开始显示背景。*/
}
#div2{
background-clip:content-box;/*background-clip 背景绘制区域
border-box： 从border区域向外裁剪背景。 当背景repeat的时候，边框才有背景显示
padding-box： 从padding区域向外裁剪背景。
content-box： 从content区域向外裁剪背景。 */
}
#div3{
-webkit-background-clip:text;/*默认值 背景填充文本*/
color:rgba(0,0,0,0);font:50px/400px "微软雅黑";text-align:center;font-weight:800;
}
#div3:hover{
background-position:-100px -100px;
}
</style>
</head>
<body><!--身体-->
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">中国你好</div>
</body>
</html>颜色渐变
线性渐变：linear-gradient(起点/角度，颜色 位置，...,)
起点：left/top/right/bottom/left top...... 默认top
角度：逆时针方向 0-360度
颜色 位置：red 50%, blue 100%(红色从50%渐变到100%为蓝色)
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{
width:300px;height:300px;
float:left;
margin-left:15px;
}
#div1{
background-image:-webkit-linear-gradient(left,red,blue);
}
#div2{
background-image:-webkit-linear-gradient(0deg,red 0%,blue 50%,yellow 100%);/*逆时针旋转*/
}
#div3{
background-image:-webkit-linear-gradient(0deg,rgba(0,255,0,1) 0px,rgba(0,255,0,1) 7px,rgba(0,0,0,0) 7px),-webkit-linear-gradient(90deg,rgba(0,255,0,1) 0px,rgba(0,255,0,1) 7px,rgba(0,0,0,0) 7px);/*通过透明一部分区域，然后通过平铺，和大小裁剪实现格子*/
background-size:20px 20px;
background-repeat:repeat;
}
</style>
</head>
<body><!--身体-->
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>颜色渐变
repeating-linear-gradient 线性渐变重复平铺
IE低版本渐变(滤镜)：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{
width:300px;height:20px;
border:1px solid rgba(255,0,0,1);
background-image:-webkit-repeating-linear-gradient(30deg,#cc00ff 0,#663333 10px,#993300 10px,#6600cc 20px);
border-radius:20px;transition:1s linear;
}
div:hover{
background-position:-100px 0;
}
</style>
</head>
<body><!--身体-->
<div ></div>
</body>
</html>IE低版本渐变(滤镜)：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{
width:300px;height:300px;
border:1px solid red;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#0000ff',GradientType='0');
}/*IE只支持两种颜色*/
</style>
</head>
<body><!--身体-->
<div ></div>
</body>
</html>颜色渐变
径向渐变：radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
起点：left/top/right/bottom或具体值/百分比
形状：ellipse(椭圆)、circle(正圆)
大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;
注:firefox目前只支持关键字
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css样式表的衣柜*/
div{
width:300px;height:300px;
border:1px solid rgba(255,0,0,1);
float:left;
margin-left:15px;
margin-top:15px;
}
/* 径向渐变：radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
起点：left/top/right/bottom或具体值/百分比
形状：ellipse(椭圆)、circle(正圆)
大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;
注:firefox目前只支持关键字
*/
#div1{
background-image:-webkit-radial-gradient(rgba(0,0,0,1),rgba(0,255,0,1));/*默认中心为圆心,默认为圆形*/
}
#div2{
background-image:-webkit-radial-gradient(left top,rgba(0,0,0,1),rgba(0,255,0,1));/*左上角为圆心*/
}
#div3{
background-image:-webkit-radial-gradient(200px 100px,rgba(0,0,0,1),rgba(0,255,0,1));/*200px,100px处为圆心*/
}
#div4{
background-image:-webkit-radial-gradient(200px 100px,100px 50px,rgba(0,0,0,1),rgba(0,255,0,1));
/*200px,100px处为圆心，水平半径为100px，锤子半径为50px*/
}
#div5{
background-image:-webkit-radial-gradient(200px 100px,ellipse,rgba(0,0,0,1),rgba(0,255,0,1));/*ellipse椭圆*/
}
#div6{
background-image:-webkit-radial-gradient(200px 100px,closest-side,red,blue);
/*关键字（closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;*/
}
</style>
</head>
<body><!--身体-->
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于css中列表（ul ol）存在默认间距的问题
- css下拉框ie8下面文字居中
- 关于a标签点击去除默认样式
- css-属性前的 -webkit, -moz
- div+css笔记
- css兼容ie浏览器鼠标放大效果
- CSS碎片知识整理
- Ajax、Flash优缺点
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)
- css背景图片填充样式background-size兼容ie8以下浏览器解决
- CSS——NO.3(CSS选择器)
- css样式，inline-block
- CSS样式学习
- 浮动的优缺点，如何清除浮动？
- Css3 弹性盒模型
- CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
- CSS3:文字阴影知多少_WEB标准
- 被解放的GPU与CSS3中对GPU的应用分析
- 关于css 行元素和块元素 相互转换 居中
- css position 设置元素的定位方式详解