CSS3背景
1.background-clip
该属性指定背景图像的绘制区域
语法：
background-clip:border-box(从边框开始显示）
image.png
background-clip:padding-box(从内边距开始显示）
image.png
background-clip:content-box(从内容开始显示）
image.png
兼容性：IE9+和其他主流浏览器
2.background-origin
该属性指定背景图像位置的相对background-position定位
语法:
background-origin:content-box(相对content左上角点定位）
image.png
background-origin:padding-box(相对padding左上角点定位）
image.png
background-origin:border-box(相对border左上角点定位）
image.png
兼容性：IE9+ firefox4+ safari5+ chrome opera
3.background-size
该属性指定背景图像的大小
语法：
background-size:contain（等比缩放至一边紧贴容器边缘）
background-size:cover（背景图片覆盖元素不留白）
background-size:800px 500px（元素宽度和高度）
background-size:800px(元素宽度，高度按图比例缩放）
background-size:50%(宽度为容器宽度50%，高度auto)
background-size:50% 50%（宽度为容器宽度50%，高度为容器高度50%)
兼容性：IE9+ firefox4+ safari5+ chrome opera
编程练习
根据效果图写出代码，实现：
（1） 默认状态图片是不显示的
（2）当鼠标悬停在不同的列表项上时，出现带背景图片的div元素，元素的背景图片大小就是列表项上的标题文字
比如：
当鼠标悬停在”50% 50%”区域时，元素的背景图片是父元素大小的50%
效果图如下：
image.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-size</title>
<style type="text/css">
a{text-decoration:none;}
ul{list-style:none;}
div{
background-image:url("http://climg.mukewang.com/582c37e50001b08102000065.jpg");
width:100px;height:100px;
display:none;border:2px solid red;
background-repeat:no-repeat;
}
/*补充代码*/
/用伪类和后代选择器实现滑动出现图片效果/
.length:hover div{
display:block;
background-size:100px 100px;
}
.percent:hover div{
display:block;
background-size:50% 50%;
}
.cover:hover div{
display:block;
background-size:cover;
}
.contain:hover div{
display:block;
background-size:contain;
}
</style>
</head>
<body>
<h2>background-size不同属性值不同效果</h2>
<ul>
<li class="length">
<h3><a href="">100px 100px</a></h3>
<div></div>
</li>
<li class="percent">
<h3><a href="">50% 50%</a></h3>
<div></div>
</li>
<li class="cover">
<h3><a href="">cover</a></h3>
<div></div>
</li>
<li class="contain">
<h3><a href="">contain</a></h3>
<div></div>
</li>
</ul>
</body>
</html>
4.background-image
该属性可以为元素设置多个背景图片
语法：
background-image:url1('bg1.jpg'),url2('bg2.jpg');
引用多个图片，前面的图片会遮住后面的图片。
5.background
背景属性整合
语法：
background:color position size repeat origin clip attachment image
image.png
建议书写方式
image.png
CSS3渐变
渐变：颜色到颜色之间的平稳过渡
1.线性渐变
沿着一根轴线改变颜色，从起点到终点线性渐变。
background:linear-gradient(direction,color1,color2)
默认从上到下
background:liner-gradient(red,blue)
从左到右
image.png
image.png
对角
image.png
image.png
linear-gradient角度
语法：background:linear-gradient(angle,color1,color2)
角度理解
image.png
多个颜色渐变的时候控制每个颜色的分布,第一个颜色不写默认为0%，最后一个颜色不写默认为100%
image.png
image.png
透明色渐变，用rgba表示
image.png
image.png
重复渐变
image.png
image.png
2.径向渐变
从起点到终点颜色由内而外圆形渐变
background:radial-gradient(center,shape size,color1,color2)
shape:circle圆形，ellipse椭圆（默认）
尺寸大小关键字
image.png
重复渐变
image.png
编程练习
根据要求，补充代码（使用CSS3背景的渐变及其它属性写出），要求如下：
image.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>IE6~IE8下的渐变</title>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color:yellow;
/*补充代码*/
background-size:100px 100px;
background-image:-webkit-linear-gradient(45deg,purple 25%,transparent 25%),
-webkit-linear-gradient(-45deg,purple 25%,transparent 25%),
-webkit-linear-gradient(45deg,transparent 75%,purple 75%),
-webkit-linear-gradient(-45deg,transparent 75%,purple 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网友评论