CSS3中background背景的施用
日期：2014-05-17 浏览次数：20759 次
CSS3中background背景的使用
1. background渐变色例子:
2. background-clip裁剪区域
background-clip有三种属性:border, padding, content.
分别指覆盖border的区域, 覆盖padding区域裁剪border. 覆盖content区域裁剪border和padding.
3.background-origin背景显示开始点
同样有border(从边框开始显示背景图), padding(从padding开始背景图), content(从真正内容开始显示背景图).
1. background渐变色例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.div2{
width:100px;height:100px;background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600), color-stop(0.5,#FFFFFF));
}
</style>
</head>
<body>
<div class="div2"></div>
</body>
</html>2. background-clip裁剪区域
background-clip有三种属性:border, padding, content.
分别指覆盖border的区域, 覆盖padding区域裁剪border. 覆盖content区域裁剪border和padding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>3.background-origin背景显示开始点
同样有border(从边框开始显示背景图), padding(从padding开始背景图), content(从真正内容开始显示背景图).
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
