背景尺寸
2018-07-20 本文已影响0人
藏于心Z
background-size后可接4种值
1.具体的数值
background-size:700px 700px;
第一个值,表示x轴大小(宽度),第二个值表示y轴大小(高度)。如果只设置了一个只,表示x轴的背景大小,第二个值会自动缩放或者拉伸。
2.百分比
background-size:80% 80%;
第一个值,表示x轴针对自己本身盒子的宽度的比例(宽度),第二个值表示y轴针对自己本身盒子高度的比例大小(高度)。如果只设置了一个值,表示x轴针对自己本身盒子的宽度的比例(宽度),第二个值会自动缩放或者拉伸。
3.cover
把背景图尽量扩展至最大,使背景图覆盖整个盒子区域,至于x轴和y轴是否超出不考虑。
4.contain
把背景图尽量扩展至最大,使背景图尽量显示完整,当x轴或者y轴期中之一贴近盒子边缘,另一方停下来,至于x轴和y轴是否有填不满的情况下不考虑。
在css3中,所有的颜色值都可以用rgba的值来写,方法:border:50px solid rgba(255,255,255,0.5) ;
a表示透明度,数值在0-1之间,数值越大,越不透明。