孙肖宁

CSS3中的背景缩放以及多背景
背景缩放(CSS3)通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动We...
扫描右侧二维码阅读全文
03
2018/09

CSS3中的背景缩放以及多背景

背景缩放(CSS3)

通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)
以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上,
    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
           url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
           url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
Last modification:September 3rd, 2018 at 03:03 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment