免VIP看全网影视 免VIP看全网影视 每天免费领取名片赞 免VIP看全网影视 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月 文字广告位50/月
| 如何在幻影博客投稿? | 点击加入幻影博客交流群 | 本站所有广告商均已承诺投放的内容诚信可靠,如果被骗请点击:联系809666838举报 | 广告位价格说明 | 友联申请说明 |

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)
以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上,

分享到:更多

相关推荐:

发表评论

游客 表情
送你一朵小花花~

网友评论(0)