css 裁剪背景图片,CSS裁剪背景图片的歪招

标题的背景图片.png

背景图片左右不对称怎么办？(ㄒoㄒ)此处由于其他限制不能裁剪并使用绝对定位。

【语法】

①background-clip 属性规定背景的绘制区域。

默认值：border-box

继承性：no

版本：CSS3

JavaScript 语法：object.style.backgroundClip="content-box"

语法    background-clip: border-box|padding-box|content-box;

border-box

背景被裁剪到边框盒。

padding-box

背景被裁剪到内边距框。

content-box

背景被裁剪到内容框。

②background-origin

相对于内容框来定位背景图像：div{background-image:url('smiley.gif');background-repeat:no-repeat;background-position:left;background-origin:content-box;

}

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

默认值：    padding-box

继承性：    no

版本：     CSS3

JavaScript 语法：  object.style.backgroundOrigin="content-box"

语法background-origin: padding-box|border-box|content-box;

padding-box

背景图像相对于内边距框来定位。

border-box

背景图像相对于边框盒来定位。

content-box

背景图像相对于内容框来定位。

【区别】

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。

虽然两者看上去实现的效果差不多，但是他们两个的原理是不同的。background-origin定义的是背景位置(background-position)的起始点；而background-clip是对背景(图片和背景色)的(粗暴地)切割。

background-clip和background-origin的三种属性值.png

可以用来做什么呢：

1.用三块小图片做圆角按钮。可重复使用，做成各种长度的按钮，减少向服务器请求的次数。

三块.png

圆角按钮.png

2.项目中：

图片.png

用200px左侧边框把左边遮盖住h2{

......

background:url("") -15px -10px no-repeat;

background-origin:border-box;

border-left:200px solid #000;/*演示用的黑色，改成白色达成隐藏效果*/}

貌似在火狐中可能存在兼容问题？？

作者：萌三蛋子geocsj

链接：https://www.jianshu.com/p/14b6fcf968a9

。