CSS3教程-背景

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3教程-背景，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1537字，纯文字阅读大概需要3分钟。

内容图文

前端开发的程序员们，每天给大家讲解一些关于CSS3教程的知识是多么开心的一件事啊，CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

在本文，您将学到以下两种背景属性：

1、background-size；

2、background-origin。

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

浏览器支持

我们首先来了解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);
}

新的背景属性：

以上就是CSS3教程-背景的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的CSS3教程-背景全部内容，希望文章能够帮你解决CSS3教程-背景所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---