CSS3 基础（003_背景）

最新推荐文章于 2024-07-14 13:35:37 发布

柯南道尔2606

最新推荐文章于 2024-07-14 13:35:37 发布

阅读量808

点赞数

分类专栏： CSS 文章标签： css3

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css3_backgrounds.asp

翻译：

CSS3 背景（CSS3 Backgrounds）

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    background: url("http://www.w3schools.com/css/img_flwr.gif") no-repeat
        scroll right bottom, rgba(0, 0, 0, 0)
        url("http://www.w3schools.com/css/paper.gif") repeat scroll left top;
    padding: 15px;
}

.w3-codespan {
    background-color: #f1f1f1;
    color: crimson;
    font-size: 110%;
    padding-left: 4px;
    padding-right: 4px;
}
</style>
</head>
<body>
    <div id="example1">
        <h2>CSS3 Backgrounds</h2>
        <p>CSS3 contains a few new background properties, which allow greater control of the background element.</p>
        <p>In this chapter you will learn how to add multiple background images to one element.</p>
        <p>You will also learn about the following new CSS3 properties:</p>
        <ul>
            <li><code class="w3-codespan">background-size</code></li>
            <li><code class="w3-codespan">background-origin</code></li>
            <li><code class="w3-codespan">background-clip</code></li>
        </ul>
    </div>
</body>
</html>

Browser Support

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit-、-moz- 或 -o- 指定带前缀工作的第一个版本号。

属性（Property）
background-image(with multiple backgrounds)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.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 多背景（CSS3 Multiple Backgrounds）

CSS3 允许你通过设置 background-image 属性给元素添加多个背景图。
不同的背景图以逗号（,）隔开，图片被堆叠在彼此的上方，第一张图片最接近观察者。
下列示例有两张背景图，第一张图是一朵花（被排列在右下方），第二张图是纸质背景（被排列在左上角）：

#example1 {
    background-image: url("http://www.w3schools.com/css/img_flwr.gif"), url("http://www.w3schools.com/css/paper.gif");
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    background-image: url("http://www.w3schools.com/css/img_flwr.gif"), url("http://www.w3schools.com/css/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>

多个背景图既可以用私有背景属性指定（如上所示）也可以用 background 简写属性指定。
下列示例使用 background 简写属性（与上例结果相同）：

#example1 {
    background: url("http://www.w3schools.com/css/img_flwr.gif") right bottom no-repeat, url("http://www.w3schools.com/css/paper.gif") left top repeat;
}

CSS3 背景尺寸（CSS3 Background Size）

CSS3 background-size 属性允许你指定背景图的大小。
在 CSS3 之前，背景图的大小是图片的实际大小。CSS3 允许我们根据不同的环境复用背景图。
背景图的大小可以由长度、百分比或关键字（contain 或 cover）指定。
下列示例将背景图调整为比源图更小（使用像素）：
源背景图：
CSS3 背景尺寸

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    border: 1px solid black;
    margin-bottom: 15px;
}

#example2 {
    background: rgba(0, 0, 0, 0)
        url("http://www.w3schools.com/css/img_flwr.gif") no-repeat scroll 0 0;
    margin: 15px;
    padding: 15px;
}
</style>
</head>
<body>
    <div class="div1">
        <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>
            <p>
                Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</body>
</html>

调整后的背景图：
CSS3 背景尺寸

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    border: 1px solid black;
    margin-bottom: 15px;
}

#example3 {
    background: rgba(0, 0, 0, 0)
        url("http://www.w3schools.com/css/img_flwr.gif") no-repeat scroll 0 0/100px 80px;
    margin: 15px;
    padding: 15px;
}
</style>
</head>
<body>
    <div class="div1">
        <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>
            <p>
                Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</body>
</html>

以下为示例综合代码：

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 1px solid black;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    padding: 15px;
}

#example2 {
    border: 1px solid black;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-size: 100px 80px;
    background-repeat: no-repeat;
    padding: 15px;
}
</style>
</head>
<body>
    <p>Original background-image:</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>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <p>Resized background-image:</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>
        <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>

background-size 另两种可能的值是 contain 和 cover 。
contain 关键字将背景图尽可能地扩充（但是，它的宽高必须适应于内容区域之内）。如上所述，取决于背景图比和背景位置区域，背景的某些区域可能没有被背景图遮盖。
cover 关键字将背景图伸缩至内容区域被完全遮盖（它的宽高等于或大于内容区域）。如上所述，背景图的某些部分在背景位置区域可能是不可见的。

下列示例阐明 contain 和 cover：

#div1 {
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-size: cover;
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    border: 1px solid black;
    height: 150px;
    width: 180px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
}

.div2 {
    border: 1px solid black;
    height: 150px;
    width: 180px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    background-size: contain;
}

.div3 {
    border: 1px solid black;
    height: 150px;
    width: 180px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>
    <p>Original image:</p>
    <div class="div1">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <p>Using the "contain" keyword:</p>
    <div class="div2">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <p>Using the "cover" keyword:</p>
    <div class="div3">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>

定义多背景图的尺寸（Define Sizes of Multiple Background Images）

当有多个背景的时候，background-size 属性也接受多个背景大小的值（使用 , 隔开）。
下列示例有 3 个背景图，分别对每张图指定了不同的 background-size 值：

#example1 {
    background: url("http://www.w3schools.com/css/img_flwr.gif") left top no-repeat, url("http://www.w3schools.com/css/img_flwr.gif") right bottom no-repeat, url("http://www.w3schools.com/css/paper.gif") left top repeat;
    background-size: 50px, 130px, auto;
}

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    background: url("http://www.w3schools.com/css/img_flwr.gif") left top no-repeat, url("http://www.w3schools.com/css/img_flwr.gif")
        right bottom no-repeat, url("http://www.w3schools.com/css/paper.gif") left top repeat;
    padding: 15px;
    background-size: 50px, 130px, auto;
}
</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>

全尺寸背景图（Full Size Background Image）

现在，我们想要在某个站点有一张背景图，该背景图将始终遮盖整个浏览器窗口。

必要步骤如下：

用图片填充整个页面（没有空白）
必要时可伸缩图片
将图片居中于页面之内
不能有滚动条

下列示例展示具体做法；使用 html 元素（html 元素的高度总是不低于浏览器窗口的高度）。
然后，对它设置 fixed 和 centered 背景，再使用 background-size 属性调整它的大小：

html {
    background: url("http://www.w3schools.com/css/img_flower.jpg") no-repeat center fixed;
    background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
<style>
html {
    background: url("http://www.w3schools.com/css/img_flower.jpg") no-repeat center fixed;
    background-size: cover;
}

body {
    color: white;
}
</style>
</head>
<body>
    <h1>Full Page Background Image</h1>
    <p>
        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.
    </p>
</body>
</html>

CSS3 background-origin 属性（CSS3 background-origin Property）

CSS3 background-origin 属性指定背景图的位置。

该属性接收 3 个不同值：

border-box - 背景图起始于边框的左上角
padding-box - （默认）背景图起始于内边距边界的左上角
content-box - 背景图起始于内容的左上角

下列示例说明 background-origin 属性：

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    background-origin: content-box;
}

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
}

#example2 {
    border: 10px solid black;
    padding: 35px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    background-origin: border-box;
}

#example3 {
    border: 10px solid black;
    padding: 35px;
    background: url("http://www.w3schools.com/css/img_flwr.gif");
    background-repeat: no-repeat;
    background-origin: content-box;
}
</style>
</head>
<body>
    <p>No background-origin (padding-box is default):</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>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <p>background-origin: border-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>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <p>background-origin: 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>
        <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>

CSS3 background-clip 属性（CSS3 background-clip Property）

CSS3 background-clip 属性指定背景的描绘区域。

该属性接收 3 个不同值：

border-box - （默认）背景被描绘至边框的外边界
padding-box - 背景被描绘至内边距的外边界
content-box - 背景被描绘于内容盒子（content box）之内

下列示例说明 background-clip 属性：

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

<!DOCTYPE html>
<html>
<head>
<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>No background-clip (border-box is default):</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>

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础（003_背景）

原始网址：http://www.w3schools.com/css/css3_backgrounds.asp翻译：CSS3 背景（CSS3 Backgrounds）html>head>style>#example1 { background: url("http://www.w3schools.com/css/img_flwr.gif") no-repeat
复制链接

扫一扫