CSS3 背景 修改教程

CSS3 背景

CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。

在本章,您将学到以下背景属性:

  • background-size
  • background-origin

您也将学到如何使用多重背景图片。

浏览器支持

属性 浏览器支持
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;
}

例子 2

对背景图片进行拉伸,使其完成填充内容区域:

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

背景图片的定位区域

实例

在 content-box 中定位背景图片:

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

实例

为 body 元素设置两幅背景图片:

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

新的背景属性

属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

如果觉得JSRUN的教程对您有用,请随意打赏。您的支持将鼓励JSRUN继续提供更好的服务

捐助JSRUN
JSRUN前端教程共编系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的本前端教程,让知识的积累变得统一完整、自成体系。 希望广大工程师能一起参与进共编,让零散在世界各处的知识点找到组织、找到家。
X
支付宝
9.99
请使用支付宝扫码支付, 有效时间 5分0秒
超过有效时间后请立即停止支付。
支付故障请联系QQ:565830900
因10.00元通道已占用,系统建议您支付9.99元
正在生成二维码, 此过程可能需要15秒钟
谢谢支持,我一定会更加努力的