1、如何解决背景图片的大小问题?
之间写代码的时候就遇到这种问题,很多时候只能是根据图片的大小来设置长宽,之间之前百度了,也没有很是理解,最近通过最近的学习,来给大家做一个分享。
background-size:控制背景图片的大小
下面有四个属性,
1、length: 直接输入具体的数值,一般情况下是两个数值(长,宽),如果仅仅设置了一个,第二个默认为auto(与长等比例的缩放)
2、percentage:百分比,一般情况下也是两个值,也可以设置一个值,第二个值不写默认为auto
3、cover:等比例缩放,填充整个背景
4、contain:等别例的缩放,直到某一边触碰到边缘为止(可能会有留白)
注:上述的百分比之类的都是基于背景图片所在的父元素所规定的长宽(如div)
2、如果等比例的裁剪图片的周围
我们用图片的时候,常常需要裁剪,不想使用裁剪工具的你,需要直接在代码里使用
background-clip:绘制背景图片
border-box:
padding-box
content-box
就如上诉你所理解的那样,将边框区域的内容裁剪掉,或者将内边框区域的内容裁剪掉
3、背景图片定位
background-origin
border-box:
padding-box
content-box
依旧是如你理解的那样,背景图片的左上角的起始位置要从说明位置开始