感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS裁剪背景图片的歪招

holdtom
关注TA
已关注
手记 1885
粉丝 240
获赞 992

webp

标题的背景图片.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是对背景(图片和背景色)的(粗暴地)切割。

webp

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

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


webp

三块.png

webp

圆角按钮.png

2.项目中:


webp

图片.png

webp

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

h2{
    ......
    background:url("") -15px -10px no-repeat;
    background-origin:border-box;
    border-left:200px solid #000;/*演示用的黑色,改成白色达成隐藏效果*/}

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



作者:萌三蛋子geocsj
链接:https://www.jianshu.com/p/14b6fcf968a9


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP