微信公众号:[前端公虾米]
关注
前端公虾米
。问题或建议,请公众号留言。
关于background的相关属性
所有的浏览器都支持background属性 拿起了我多年前用过的xmind导出了张属性说明图
试用模式,我太难了,公众号回复【background】获取原图
下面的演示案例将直接使用
background
这个属性,不适用单属性设置,因为这个属性在浏览器的支持更好,更简洁(能少一行是一行emmmm...)
经典场景
奉上原图参照物
(图源/网络)
居中
不重复平铺 顺时针八个点
注:其中的`left top right bottom`为`background-position`的属性,可以设置为px 或者百分比
重复平铺
//x轴重复平铺
background: transparent url(./5.jpg) repeat-x
背景图指定大小
在日常开发中,我们常常需要对背景图进行一个尺寸的缩放,上面的常规操作是无法满足我们的需求的。 如果是多行属性的操作中,我们可能是这样写:
background: transparent url(./5.jpg) no-repeat bottom left;
background-size:150px auto;
而在单行属性声明中,我们仅需这样写:
background: transparent url(./5.jpg) no-repeat bottom left/150px;
也可以达到一样的效果
注意事项:
bg-size
必须跟在bg-position
后并以'/'分隔,如'center/100px'
关于bg-clip与bg-origin的属性说明
background-origin
:背景图的原点位置的背景相对区域background-clip
:背景图是否延伸到边框下面
在单行
background
属性声明中,由于两者属性值相同,在仅出现了一个属性值的时候,他同时为background-origin
和background-clip
设定属性,如果出现了两次,则分别给background-origin
、background-clip
设定.
小结:
background-origin
决定了背景图原点从哪开始(起始点)background-clip
决定了背景图的绘制到边框外沿、padding外延或者是content外延终止(终止点)- 从我个人的理解上,起始点和终止点的对角线连线即为背景图可绘制的最大区域
- 当使用
background-attachment
为fixed
时,background-origin
属性将被忽略不起作用。 background-clip
可以将背景图设置为文字的前景色
background 多背景图片使用
CSS如下:
background: url('./9.jpg') left center/100px no-repeat,
url('./7.jpg') top center/100px no-repeat,
url('./7.jpg') bottom center/100px no-repeat,
url('./9.jpg') right center/100px no-repeat red;
效果图如下:
注:因为整个元素只能有一个背景色,所以在定义多背景图片的时候
bg-color
只能在最后一个属性上声明,否则会导致整个background
属性声明失效;
在多张背景图存在重叠的情况下,先声明的背景图优先级高 CSS如下:
background: url('./5.jpg') center/100px no-repeat,
url('./7.jpg') top center/100px no-repeat,
url('./4.jpg') bottom center/150px no-repeat,
url('./7.jpg') bottom center no-repeat,
url('./9.jpg') right center/100px no-repeat red;
效果图如下:
有关background的单行属性声明使用就讲到这里,后续会继续补充,写的不好的麻烦见谅...新手作者
Object-fit实现img图片尺寸设置
本文主要针对的是background属性中的图片常规操作,讲到图片,这边也浅谈一下img的一个图片尺寸设定的小技巧,让我们的小伙伴们从
display: inline-block;
width: 100%;
height: auto;
解脱出来
CSS部分
HTML部分
效果图
该属性分别有fill
、contain
、cover
、none
、scale-down
五个,从效果图上来看,应该很好理解,这边只对scale-down
做一下说明。
scale-down
属性值的内容尺寸会与none
或者contain
其中一个一样,至于取决于哪个值,取决于none
和contain
哪个得到的内容尺寸更小一些。当前的none属性黑眼圈较大影响工作,所以选择了contain黑眼圈较小的来安慰自己
小结
本文仅仅是总结了下background在实际开发中使用背景图片的相关单行属性声明的使用技巧 希望我的内容能被大家喜欢,不足之处还望理解和希望大佬指出赐教。 谢谢大家!
如果你觉得这篇文章不错,请别忘记点个赞跟关注哦~😊
交流
微信公众号「前端公虾米」,将不定时更新最新、实用的开发小技巧和相关前端干货 关注公众号,回复"资料"获取全套前端视频教程