CSS3 背景
CSS3 background-origin 屬性
background-origin 屬性規(guī)定背景圖片的定位區(qū)域铜靶。
背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域扣甲。
[圖片上傳失敗...(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>
