首先复习两个背景属性
background-origin:规定背景图片从哪个部位开始显示背景图片，它的属性也有border-box、padding-box（默认值）、content-box 这3种属性，注意是开始显示的位置，也就是只是规定背景图片从容器中的什么地方开始显示。
以下div容器有20px的padding
左图：background-origin: content-box;
右图：background-origin: padding-box-box;该图片默认平铺效果。
background-clip：背景裁剪，规定背景从哪个区域开始向外裁剪，它有3种属性：border-box、padding-box（默认值）、content-box、border-box；
设置background-clip: content-box，效果如下：
增大背景图片的点击区域代码
<style>
div{
padding: 20px;
width: 200px;
height: 200px;
background: url("images/banner_1.jpg");
/*
关键部分为以下两行代码
padding部分为增大的点击区域
*/
background-origin: padding-box-box;
background-clip: content-box;
}
</style>
<body>
<div>
</div>
</body>
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
