足球游戏_中国足彩网¥体育资讯$

css 如何让背景图片拉伸填充避免重复显示
来源:易贤网 阅读:1384 次 日期:2016-07-13 14:17:44
温馨提示:易贤网小编为您整理了“css 如何让背景图片拉伸填充避免重复显示”,方便广大网友查阅!

但是css3出现以后,这个重复显示的情况被改善了。background-size 属性可以让我们之前的让背景图片拉伸填充的希望成真,具体使用方法如下感兴趣的朋友可以参考下哈,希望对大家有所帮助

如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。

比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。

所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:

1.是一整张大图,尺寸和区域大小刚好吻合

2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。

但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。

而且这个属性在firefox,chrome,以及ie9上都可以使用。

具体使用方法如下:

背景图尺寸(数值表示方式):

代码如下:

#background-size{

background-size:200px 100px;

}

背景图尺寸(百分比表示方式):

代码如下:

#background-size2{

background-size:30% 60%;

}

背景图尺寸(等比扩展图片来填满元素,即cover值):

代码如下:

#background-size3{

background-size:cover;

}

背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):

代码如下:

#background-size4{

background-size:contain;

}

背景图尺寸(以图片自身大小来填充元素,即auto值):

代码如下:

#background-size5{

background-size:auto;

}

中国足彩网信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标