小白教程
所有教程
关于
Search
172.69.6.208
172.69.6.208
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS3 背景”的源代码
本页内容
上一节:
CSS3_圆角
下一节:
CSS3_文本效果
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 背景}}[[Category:CSS 教程|45]] = CSS3 背景 = == CSS3 背景 == CSS3 中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: * background-image * background-size * background-origin * background-clip 您还将学习如何使用多重背景图像。 == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | background-image(with multiple backgrounds) | 4.0 | 9.0 | 3.6 | 3.1 | 11.5 |- | background-size | 4.01.0 -webkit- | 9.0 | 4.03.6 -moz- | 4.13.0 -webkit- | 10.510.0 -o- |- | background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |- | background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |} == CSS3 background-image属性 == CSS3中可以通过background-image属性添加背景图片。 不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。 <sample title="" desc="" lang="html" hererun="1"> #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> </head> <body> <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html> </run> 可以给不同的图片设置多个不同的属性 <sample title="" desc="" lang="html" hererun="1"> #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; padding: 15px; } </style> </head> <body> <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html> </run> == CSS3 background-size 属性 == background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。 CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。 你指定的大小是相对于父元素的宽度和高度的百分比的大小。 == 实例 1 == 重置背景图像: <sample title="" desc="" lang="html" hererun="1"> div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { background:url(/try/demo_source/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" height="162"></p> </body> </html> </run> == 实例 2 == 伸展背景图像完全填充内容区域: <sample title="" desc="" lang="html" hererun="1"> div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </body> </html> </run> == CSS3 的 background-origin 属性 == background-origin 属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。 在 content-box 中定位背景图片: <sample title="" desc="" lang="html" hererun="1"> div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { border:1px solid black; padding:35px; background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } </style> </head> <body> <p>背景图像边界框的相对位置:</p> <div id="div1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <p>背景图像的相对位置的内容框:</p> <div id="div2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html> </run> {| class="table table-striped table-hover" |width="50%"| == CSS3 多个背景图像 == |width="50%"| |- | CSS3 允许你在元素上添加多个背景图像。 | |} 在 body 元素中设置两个背景图像: <sample title="" desc="" lang="html" hererun="1"> body { background-image:url(img_flwr.gif),url(img_tree.gif); } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> </head> <body> <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html> </run> == CSS3 background-clip属性 == CSS3中background-clip背景剪裁属性是从指定位置开始绘制。 <sample title="" desc="" lang="html" hererun="1"> #example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { border: 10px dotted black; padding:35px; background: yellow; } #example2 { border: 10px dotted black; padding:35px; background: yellow; background-clip: padding-box; } #example3 { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; } </style> </head> <body> <p>没有背景剪裁 (border-box没有定义):</p> <div id="example1"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <p>background-clip: padding-box:</p> <div id="example2"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <p>background-clip: content-box:</p> <div id="example3"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html> </run> == 新的背景属性 == {| class="table table-striped table-hover" ! 顺序 ! 描述 ! CSS |- | [[css3 pr background clip|background-clip]] | 规定背景的绘制区域。 | 3 |- | [[css3 pr background origin|background-origin]] | 规定背景图片的定位区域。 | 3 |- | [[css3 pr background size|background-size]] | 规定背景图片的尺寸。 | 3 |}
返回至“
CSS3 背景
”。
上一节:
CSS3_圆角
下一节:
CSS3_文本效果