背景尺寸

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之间,数值越大,越不透明。

上一篇下一篇

猜你喜欢

热点阅读