前端必知：9.背景的设置

最新推荐文章于 2024-07-23 09:00:00 发布

小姚学前端

最新推荐文章于 2024-07-23 09:00:00 发布

阅读量2k

点赞数 2

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131624916

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

在前端开发中，背景的设置是一个重要的方面，可以通过 CSS 来实现。以下是一些常用的背景设置属性和用法示例：

background-color: 设置背景颜色。

body {
  background-color: #f2f2f2;
}

background-image: 设置背景图片。

body {
  background-image: url('background.jpg');
}

background-repeat: 设置背景图片的重复方式。

body {
  background-repeat: repeat-x;
}

background-position: 设置背景图片的位置。

body {
  background-position: center top;
}

background-size: 设置背景图片的尺寸。

body {
  background-size: cover;
}

background-attachment: 设置背景图片的滚动方式。

body {
  background-attachment: fixed;
}

background-origin: 设置背景图片的起始位置。

div {
  background-origin: content-box;
}

background-clip: 设置背景图片的绘制范围。

div {
  background-clip: padding-box;
}

background-blur: 设置背景模糊效果。

div {
  backdrop-filter: blur(8px);
}

这些是常用的背景设置属性，可以用于定制网页的背景样式。你可以根据需求使用这些属性来创建各种各样的背景效果，包括颜色、图片、重复方式、位置、尺寸、滚动效果以及其他高级特性如模糊效果等。

相关完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .wp{
            width: 400px;
            height: 4000px;
            border: 1px #f00 solid;
            /* background: #ccc; */
            /* 设置背景色 */
            background-color: #04be02;
            /* 设置背景图 */
            background-image: url('./images/微信图片_20230707142414.png');
            /* 设置背景图的平铺方式 */
            background-repeat:no-repeat;
            /* 设置背景图定位 */
            background-position: -50px 100px;
            /* 背景图的固定定位 */
            /* background-attachment: fixed; */
        }
    </style>
</head>
<body>
    <!-- 
        background 设置标签元素的背景

        background-color   设置背景色，他的值可以是：
                            1.英文单词
                            2.16进制表示颜色
                            3.rgb（）表示颜色
        
         background-image 设置背景图片
                background-image：url（背景图的地址）

        background-repeat 设置背景图的平铺方式
                   值：   
                          repeat 默认，x轴y轴都平铺
                          reapet-x  沿x轴平铺
                          reapet-y 沿y轴平铺
                          no-repeat 不平铺

        background-position 设置背景图定位
           background-position：x轴方向的值，y轴方向的值
           值可以是
              1.具体的数值
              2.方位名词组合
                 left top right bottom center

        background-attachment 设置背景图的固定定位  
           值：
            scroll   默认值，背景图片跟着页面一起滚动
            fixed    根据浏览器可视区域，固定在具体的位置，
            他的定位参考点是 浏览器可视区域

        background 是一个复合型属性，可以写在一起，他们的顺序是
        background：color image  repeat position attzchment：

        可以单独写
        background：color;
        background: image;

      -->
    <div class="wp"></div>
</body>
</html>

小姚学前端

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端必知：9.背景的设置

这些是常用的背景设置属性，可以用于定制网页的背景样式。你可以根据需求使用这些属性来创建各种各样的背景效果，包括颜色、图片、重复方式、位置、尺寸、滚动效果以及其他高级特性如模糊效果等。在前端开发中，背景的设置是一个重要的方面，可以通过 CSS 来实现。
复制链接

扫一扫