首先复习两个背景属性
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>