码迷,mamicode.com
首页 > 其他好文 > 详细

background-image 背景图片的设置

时间:2017-11-20 23:27:16      阅读:476      评论:0      收藏:0      [点我收藏+]

标签:font   区域   属性   百分比   内容   显示   color   设置   背景图片   

  background-image 背景图片的设置

属性:background-image: url(img/banner.jpg);

  1、设置背景图的宽度

background-size: 400px;

  2、设置背景图的宽度

百分比,以父元素的百分比来设置背景图的宽度和高度,第一个值为宽度,第二值为高度,一般不设置高度,会变形

background-size: 50%;只显示50%的宽度
background-size: 100%;只显示100%的宽度
background-size: 100% 80%;只显示100%的宽度

  3、设置背景图的宽度

背景图完全覆盖背景区域,某些部分也许无法显示在背景区域内

background-size: cover;

  4、设置背景图的宽度

以显示完整图片为主,使其高度与宽度完全适应内容区域背景图。注: 但是也会留下空间没有图片。

background-size: contain;

注:这个属性设置背景图的显示是最好的

  5、设置背景图不重复

background-repeat:no-repeat;

}

background-image 背景图片的设置

标签:font   区域   属性   百分比   内容   显示   color   设置   背景图片   

原文地址:http://www.cnblogs.com/hlrblog/p/7868512.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!