首页 > 代码库 > Css背景设置 、
Css背景设置 、
每天进步一小步,一年进步一大步。
第一次发博客园文章,主要记录自己学习的一个过程。
CSS3 背景
CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。
- background-size
- background-origin
您也将学到如何使用多重背景图片。
浏览器支持
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性
CSS3 background-size 属性
background-size 属性规定背景图片的尺寸。
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
例子 1
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
background-size:63px 100px; 表示左右宽度为63像素,上下为100像素。
例子 2
对背景图片进行拉伸,使其完成填充内容区域:
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。