CSS - 背景

上一页
下一页

CSS 背景属性用于在 HTML 内容后面设置颜色、渐变或图像。有几个与背景相关的 CSS 属性用于设置颜色、大小、图像、重复行为和位置。在本节中，我们将讨论所有与 CSS 背景相关的属性及其用例。

CSS 背景示例

以下部分显示了为 HTML 元素设置颜色、图像和渐变的示例。

背景：无
背景：颜色
背景：渐变
背景：图像
尝试不同的背景选项

目录


 

背景简写属性

background 是以下属性的简写

background: [bg-color] [bg-image] [bg-position]/[bg-size] [bg-repeat]
            [bg-origin] [bg-clip] [bg-attachment];

/* Example */
background: green url('image.jpg') top/20% no-repeat border-box 
            content-box fixed;

如果要添加background-size，则必须将其紧跟在background-position之后，并用“/”分隔。例如：“left/50%”。

背景颜色属性

在 CSS 中，我们可以使用background-color 属性为 div、span、body、段落等元素设置背景颜色。

示例

这里我们为 body 和 div 标签使用了三种不同的颜色值，有关 CSS 中颜色的完整参考，请查看CSS 颜色章节。

<!DOCTYPE html>
<html>

<head>
    <style>  
        body {
            background-color: lightgray;
        }
        div{
            padding: 25px;
        }
        .firstDiv{
            background-color: rgb(255, 215, 0);
        }
        .secondDiv{
            background-color: #f0f0f0;
        }
        .thirdDiv{
            background-color: hsl(120, 100%, 75%);
        }
    </style>
</head>

<body>
    <h2>CSS Background Colors</h2>
    Body Color: lightgray; <br>  <br>
    <div class="firstDiv"> Color: rgb(255, 215, 0) </div> <br>
    <div class="secondDiv"> Color: #f0f0f0</div> <br>
    <div class="thirdDiv"> Color: hsl(120, 100%, 75%)</div>
</body>

</html>

背景图像属性

CSS 允许将图像设置为另一个元素（如 div、span、body、段落等）的背景。

background-image 属性用于设置一个或多个图像作为背景。

注意：您可以添加多个图像作为背景。您只需要用逗号分隔图像。

示例

在这个示例中，我们为 body 元素设置了一个背景图像。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div{
            background-color: rgba(255, 255, 255);
            opacity: 70%;
            padding: 20px;
        }
        body {
            background-image: url(/css/images/logo.png);
            height: 350px;
        }
    </style>
</head>

<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>

</html>

背景位置属性

background-position 属性设置元素背景图像的初始位置。图像的位置相对于background-origin属性设置的值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>  
        .position-right {
            background-image: url('/css/images/tutimg.png');
            background-position: right;
            background-repeat: no-repeat;
            width: 100%;
            height: 300px;
            border: 3px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="position-right"></div>
</body>

</html>

背景大小属性

CSS background-size 属性用于设置元素背景图像的大小。背景图像可以拉伸、约束或保持其正常大小。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-contain {
            background-image: url('/css/images/pink-flower.jpg');
            background-size: contain; /* Render Whole image */
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-contain"></div>
</body>

</html>

背景重复属性

CSS background-repeat 属性控制背景上图像的重复。图像可以在水平和垂直轴上重复，也可以不重复。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .repeat {
            background-image: url('/css/images/tutimg.png');
            background-repeat: repeat;
            width: 800px;
            height: 400px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2> CSS background-repeat property </h2>
    <div class="repeat"></div>
</body>

</html>

背景原点属性

CSS background-origin 属性用于设置背景的原点，可以是从边框的开始、边框内或填充内。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
            background-size: contain;
        }

        .content-box {
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div class="content-box"> </div>
    <p> 
        This image background start from content box of 
        div element.
    </p>
</body>

</html>

背景附件属性

CSS background-attachment 属性决定背景上图像的位置是在视口中固定还是在其容器内滚动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .fixed {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 250px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="fixed">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularized in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

背景剪裁属性

CSS background-clip 属性用于指定如何在元素的填充框、边框框或内容框内显示背景图像或颜色。它决定将背景应用于元素的哪个区域。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
            color: white;
        }

        .border-area {
            background-clip: border-box;
        }
        .padding-area {
            background-clip: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="border-area">
        Background applied to the entire element.
    </p>
    <p class="padding-area">
        Background applied to the content & padding area.
    </p>

</body>

</html>

CSS 背景所有属性

与background相关的属性都列在下表中

属性 描述 示例
background 背景相关属性的简写。
background-attachment 指定背景相对于视口的位置，固定或可滚动。
background-clip 控制背景图像延伸到元素的填充或内容框之外的程度。
background-color 设置元素的背景颜色。
background-image 在一个元素上设置一个或多个背景图像。
background-origin 设置背景的原点。
background-position 设置背景中每个图像的初始位置。
background-position-x 设置背景中每个图像的初始水平位置。
background-position-y 设置背景中每个图像的初始垂直位置。
background-repeat 控制背景中图像的重复。
background-size 控制背景图像的大小。
background-blend-mode 确定元素的背景图像如何相互混合。
打印页面
上一页
下一页
广告