HTML Body背景图片|极客教程

HTML Body背景图片

在网页设计中，背景图片是一个非常重要的元素，可以为网页增添美感和个性。在HTML中，我们可以通过设置<body>标签的background属性来添加背景图片。本文将详细介绍如何在HTML中设置<body>标签的背景图片，并提供多个示例代码供参考。

1. 使用单一背景图片

首先，我们来看一个简单的示例，如何在HTML中使用单一背景图片。

<!DOCTYPE html>
<html>
<head>
    <title>Single Background Image</title>
</head>
<body style="background-image: url('https://static.deepinout.com/gk-static/logo.png');">
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a background image.</p>
</body>
</html>

Output:

HTML Body背景图片

在上面的示例中，我们通过在<body>标签中设置background-image属性来添加背景图片。在这里，我们使用了一个外部链接的图片作为背景。

2. 使用本地背景图片

除了使用外部链接的图片，我们还可以使用本地的图片作为背景。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Local Background Image</title>
</head>
<body style="background-image: url('https://static.deepinout.com/gk-static/logo.png');">
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a local background image.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们将背景图片放在了与HTML文件同级的images文件夹中，并通过相对路径来引用这个图片。

3. 设置背景图片的大小和重复方式

在HTML中，我们可以通过设置background-size和background-repeat属性来控制背景图片的大小和重复方式。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Size and Repeat</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover; /* 背景图片填充整个屏幕 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a background image.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-size: cover;来让背景图片填充整个屏幕，而background-repeat: no-repeat;则是让背景图片不重复。

4. 使用多个背景图片

除了使用单一背景图片，我们还可以在HTML中使用多个背景图片。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Background Images</title>
    <style>
        body {
            background-image: url('https://geek-docs.com/images/background1.jpg'), url('https://geek-docs.com/images/background2.jpg');
            background-size: cover, contain; /* 第一个背景图片填充整个屏幕，第二个背景图片适应屏幕 */
            background-repeat: no-repeat, repeat; /* 第一个背景图片不重复，第二个背景图片重复 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with multiple background images.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过在background-image属性中添加多个背景图片来实现多背景效果。

5. 使用背景图片平铺

有时候，我们希望背景图片能够平铺填充整个页面，这时可以使用background-size: auto;属性。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Tiling</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: auto; /* 背景图片平铺填充整个页面 */
            background-repeat: repeat; /* 背景图片重复 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a tiled background image.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-size: auto;和background-repeat: repeat;来实现背景图片的平铺效果。

6. 使用背景图片的位置

我们还可以通过设置background-position属性来控制背景图片的位置。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Position</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center; /* 背景图片居中显示 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a centered background image.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-position: center;来让背景图片居中显示。

7. 使用背景图片的透明度

有时候，我们希望背景图片能够有一定的透明度，这时可以使用rgba()函数来设置背景颜色的透明度。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Opacity</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-color: rgba(255, 255, 255, 0.5); /* 背景颜色透明度为50% */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a background image with opacity.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-color: rgba(255, 255, 255, 0.5);来让背景颜色的透明度为50%。

8. 使用背景图片的固定位置

有时候，我们希望背景图片在页面滚动时保持固定位置，这时可以使用background-attachment: fixed;属性。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Fixed Background Image</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 背景图片固定位置 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a fixed background image.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo nec odio ultricies fermentum. Nullam nec justo nec odio ultricies fermentum.</p>
    <p>Donec auctor, nunc nec ultricies fermentum, justo odio ultricies fermentum.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-attachment: fixed;来让背景图片在页面滚动时保持固定位置。

9. 使用背景图片的混合模式

HTML中还支持使用CSS的混合模式来调整背景图片的显示效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Blend Mode</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-blend-mode: multiply; /* 背景图片混合模式为multiply */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a background image using blend mode.</p>
</body>
</html>

Output:

HTML Body背景图片

在这个示例中，我们通过设置background-blend-mode: multiply;来让背景图片使用multiply混合模式。

10. 使用背景图片的滤镜效果

除了混合模式，我们还可以通过CSS的滤镜效果来调整背景图片的显示效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Filter</title>
    <style>
        body {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            filter: grayscale(50%); /* 背景图片灰度滤镜效果 */
        }
    </style>
</head>
<body>
    <h1>Welcome to Geek Docs</h1>
    <p>This is a sample text with a background image using filter effect.</p>
</body>
</html>