CSS3 背景
CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
[图片上传失败...(image-108763-1533991840183)]
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本
。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本
。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本
这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
[图片上传失败...(image-b713f0-1533991840183)]
CSS制作变化的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a.button{
height: 200px;
width:490px;
background-image:url("../img/timg.jpg");
text-indent:-9999px;
display: inline-block;
}
a#ab{
background-position:-20px 0px;
}
a#ab:hover{
background-position:-500px -2px;
}
a#ab:active{
background-position:-20.1px 430.5px;
}
</style>
</head>
<body>
<a class="button" id="ab">sadf</a>
</body>
</html>
