前言
先列出几种常用的搭配,方便
CV
,想了解具体的可以看后面详细介绍
第 1 组:刚好填充整个背景区域,不重复
background-image:url("~@/路径");background-size: cover;background-repeat: no-repeat;
第 2 组:从左上角开始,垂直水平重复填充
background-image:url("~@/路径");background-size: 30px auto; // 宽度 30px ,高度自适应
一、图片路径:background-image
引入图片,注意路径前面需要加
~
符
background-image:url("~@/路径");
二、图片大小:background-size
指定背景图片的大小,可以设置
具体数值
、
百分比
、
cover
、
contain
具体数值
:指定宽高百分比
:按图片自身大小的百分比显示,100% 表示原图大小cover
:宽高比不变,图片缩放为刚好覆盖背景区域的最小大小
contain
:宽高比不变,图片缩放为适合背景区域的最大大小
background-size: 100px 100px; // 可以只设置一个数值,未设置的值默认为 auto
background-size: 100% 100%; // 可以只设置一个数值,未设置的值默认为 auto
background-size: cover;background-size: contain;
三、是否重复:background-repeat
当图片宽高小于背景时,如何设置重复情况,默认
x轴
、
y轴
都重复
repeat
:默认值,x轴
、y轴
都重复repeat-x
:仅x轴
重复repeat-y
:仅y轴
重复no-repeat
:不重复inherit
:继承父元素的属性设置
background-repeat: repeat; // 默认值,垂直水平都重复
background-repeat: repeat-x; // 水平方向重复
background-repeat: repeat-y; // 垂直方向重复
background-repeat: no-repeat; // 不重复
background-repeat: inherit; // 继承父元素
四、起始位置:background-position
设置背景图片的起始位置,默认值为
0%
、
0%
,即左上角
关键字
:left top
、left center
、left bottom
、right top
、right center
、right bottom
、center top
、center center
、center bottom
,这个太简单了,就不一一描述了,只需要注意一点,如果只写了一个关键字,另一个默认为center
x% y%
:指定百分比,左上角为0%
、0%
,右下角为100%
、100%
xpos ypos
:指定像素,左上角为0px
、0px
,如果只写了一个,另一个默认为50%
inherit
:继承父元素的属性设置
background-position: center center;background-position: 50% 50%;background-position: 0px 0px;
五、能否滚动:background-attachment
背景图片是否可以跟随页面滚动,默认值为
scroll
,可以滚动
scroll
:默认值,背景图片随着页面滚动
fixed
:背景图片不会随着页面滚动
local
:背景图片会随着元素内容滚动
inherit
:继承父元素的属性设置
background-attachment: scroll; // 随页面滚动
background-attachment: fixed; // 不滚动
background-attachment: local; // 随内容滚动
结束
其实还有其它属性,但是使用频率没那么高,就不一一介绍了,想了解的可以去 菜鸟教程 查看
版权归原作者 温其如玉_zxh 所有, 如有侵权,请联系我们删除。