4.3 (案例) 背景切割
2017-06-07 本文已影响0人
柒月柒日晴7
背景切割1.png
背景切割2.png
背景切割3.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
body{margin:0 auto;}
div{
margin:20px auto;
width:880px;
height:380px;
color:#fff;
font-size: 30px;
border:20px dotted #ddd;
padding:20px;
/*border: 20px solid #000;*/
background:url('images/bac.jpg') center center repeat;
/*background-size*/
}
div:nth-child(1){
background-clip:content-box;
/*background-clip:border-box;*/
/*从border部分填充*/
/*默认样式*/
/*background-clip:padding-box;*/
/*从padding部分填充*/
/*background-clip:content-box;*/
/*只在内容部分填充*/
}
.box2{
background-clip:padding-box;
background-size: 100px 300px;
/*从padding部分填充*/
}
.box3{
background-clip:content-box;
/*只在内容部分填充*/
}
.ttt{
position: absolute;
width: 500px;
height: 30px;
border: 1px red solid;
left: 35%;
top:50px;
background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
background-image: -moz-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);
/*background-image: -moz-linear-gradient(right, red 0%, yellow 100%);*/
}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<!--background-clip：背景剪切控制
border-box
padding-box
content-box-->
<div class="box1">1
<div class="ttt">今天回家了啊 啊 啊啊啊啊 </div>
</div>
<div class="box2">2</div>
<div class="box3">3
</div>
</body>
<script src=""> </script>
<script type="text/javascript">
<!--
//-->
</script>
</html>
