CSS背景设置

最新推荐文章于 2024-05-11 23:02:38 发布
最新推荐文章于 2024-05-11 23:02:38 发布
阅读量808 收藏 29
点赞数 10
分类专栏： 前端基础 文章标签： css 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73281594/article/details/137936000
版权

目录

背景颜色

背景图片

背景平铺

背景图片位置

背景图片固定

背景样式综合书写

背景色半透明

通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

在CSS中可以使用background-color 定义元素的背景颜色

基础语法如下：

选择器 {
    background-color: 颜色值;
}

在CSS中，可以将颜色设置为transparent，表示透明，也是CSS中的默认值

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <style>
        div {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div>这是一个内容</div>
</body>

</html>

效果如下：

背景图片

在CSS中可以使用background-image 定义元素的背景图片

基本语法：

选择器 {
    background-image: none; url(图片地址)
}

CSS中background-image属性有两种取值：

参数值

作用

none

没有背景图（默认值）

图片地址

使用绝对地址或者相对地址指定图片

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

📌

背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            font-size: 100px;
            background-image: url(logo.webp);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

背景平铺

在CSS中使用background-repeat 设置元素背景图像的平铺

基本语法如下：

选择器 {
    background-repeat: 值;
}

CSS中，background-repeat有以下四个值：

参数值

作用

repeat

背景在横向和纵向平铺（默认值）

no-repeat

不平铺

repeat-x

背景在横向上平铺

repeat-y

背景在纵向上平铺

示例代码：

  • 不进行平铺
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景平铺</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            font-size: 100px;
            background-image: url(logo.webp);
            /* 不进行平铺，但是不改变盒子的大小 */
            background-repeat: no-repeat;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

  • 横向平铺
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景平铺</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            font-size: 100px;
            background-image: url(logo.webp);
            /* 不进行平铺，但是不改变盒子的大小 */
            background-repeat: repeat-x;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

背景图片位置

在CSS中使用background-position属性改变图片的位置

基本语法如下：

选择器 {
    background-position: x y;
}

在CSS中background-position有两种取值方式：

参数值

说明

length

百分数/由浮点数和单位构成的固定长度值

position

方位名词：横向：left center right 纵向：top center bottom

注意：

  1. 参数是方位名词
    1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
    2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐，即center
  2. 参数是精确单位
    1. 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
    2. 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  3. 参数是混合单位
    1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

示例代码：

  • 参数是方位名词
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片位置</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: green;
            background-image: url(logo.webp);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

  • 参数是精确值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片位置</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: green;
            background-image: url(logo.webp);
            background-repeat: no-repeat;
            background-position: 20px 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

  • 参数是混合值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片位置</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: green;
            background-image: url(logo.webp);
            background-repeat: no-repeat;
            /* 第一个为center时代表横向位置，第二个为纵向位置 */
            background-position: center 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

背景图片固定

在CSS中使用background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

基本语法如下：

选择器 {
    background-attachment: fixed/scroll;
}

示例代码：

  • 图片随着内容滚动而滚动（相当于内容固定在某一部分内容）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片固定</title>
    <style>
        div {
            background-image: url(background.jpg);
            background-repeat: no-repeat;
            background-position: center 20px;
            background-attachment: fixed;
            background-attachment: scroll;
        }

        p {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
    </div>
</body>

</html>
  • 图片随着内容滚动而滚动（相当于内容在图片上移动）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片固定</title>
    <style>
        div {
            background-image: url(background.jpg);
            background-repeat: no-repeat;
            background-position: center 20px;
            background-attachment: fixed;
            background-attachment: fixed;
        }

        p {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
        <p>这是一段内容</p>
    </div>
</body>

</html>

背景样式综合书写

建议格式如下：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

📌

不同于font的综合书写，background综合书写可以不在乎顺序，但是一般按照上面的顺序进行书写，每一个属性值中间用空格分隔

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合样式</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: green url(logo.webp) no-repeat scroll center top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

背景色半透明

在CSS中可以使用rgba值为背景色设置为是否透明

基本语法如下：

选择器 {
    background: rgba(值, 值, 值, 透明程度)
}

在rgba中前三个值依旧遵守rgb三原色的值，最后一个值为0-1范围的值代表透明程度，0代表完全透明，1代表不透明

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景色半透明</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: rgba(0, 0, 255, 0.5);
            background-image: url(logo.webp);
            background-repeat: no-repeat;
            background-position: center left;
        }
    </style>
</head>

<body>
    <!-- 背景色半透明不影响文字颜色 -->
    <div>这是一个内容</div>
</body>

</html>

效果如下：

怡晗★
关注
  • 10
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【css背景图片自适应】css怎么设置背景图片自适应大小
04-11
在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
主要介绍了css控制背景示例,这里提供了css设置背景图片、设置背景颜色的方法,需要的朋友可以参考下
css 设置全屏背景图片
09-25
在HTML中，当我们设置背景图，只能采用是否重叠、居中、重叠方向这几个选项
css背景图片设置案例
01-25
css-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimage
css为图片设置背景图片
10-30
为图片设置背景图片，是一个非常搞的实例。这句话或许就感觉有点好玩。我们为以IMG标签引入页面的图片设置背景图片。
解决vscode保存less和sass时自动生成css文件的问题
锦瑟年华L的博客
05-11 116
解决vscode保存less和sass时自动生成css文件的问题
web前端之sass中的颜色函数、active按钮激活、hover鼠标悬浮、disabled禁用、scss循环、css
“代码农”微信公众号
05-11 255
web前端之sass中的颜色函数、active按钮激活、hover鼠标悬浮、disabled禁用、scss循环、css
css案例 tab上下滚动，左右滚动
weixin_38982591的博客
05-11 181
【代码】css案例 tab上下滚动，左右滚动。
【经验分享】图片自适应窗口大小css；CSS实现背景图片全屏铺满自适应的方式
VLOKL的博客
05-11 191
【经验分享】图片自适应窗口大小css；CSS实现背景图片全屏铺满自适应的方式
制作跳动的爱心网页效果
bengbeng2345的博客
05-11 262
【代码】跳动的爱心。
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-11 75
css样式，设置组件圆形等
HTML【常用的标签】、CSS【选择器】
最新发布
gangain的博客
05-11 662
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 是为了解决内容与表现分离的问题 • 多个样式定义可层叠为一 • 样式通常存储在样式表中
CSS-flex布局
Kevin7_35Durant的博客
05-11 1261
给父级元素的展示效果设置为flex布局，整个flex容器 里面的flex item都会沿着主轴展开。作用：flex items（弹性盒子）可以自动挤压或拉伸，默认弹性盒子会在一行显示。属性：flex-direction(修改主轴方向，侧轴也会随着改变)我们给三个盒子的宽设置为300px,父级盒子的宽设置为800px。属性值：整数数字，表示占用父级剩余尺寸的份数，默认是1份。作用：控制flex items在主轴方向的尺寸。网页呈现的效果：三个盒子的宽被挤压了。属性：flex-wrap。
-CSSE3100/7100
LUCK_520的博客
05-11 462
Assignment 3 CSSE3100/7100 Reasoning about Programs Due: 4pm on 17 May, 2024 The aim of this assignment is to consolidate your understanding of the course's material on objects and array-based data structures. It is worth 15% of your final mark for the
CSS的基础语法和常见的语法简单归纳
qq_49370210的博客
05-11 538
通过 CSS，可以定义网页中的元素（如文字、图像、链接等）的外观和排版方式，包括字体、颜色、大小、间距、边框等。CSS 的设计目标是将内容和样式分离，使得网页的结构和表现分离开来，使得修改样式不需要修改 HTML 结构，这样可以提高网页的灵活性和可维护性。通过将 CSS 规则放置在独立的 CSS 文件中，可以提高代码的可维护性和组织性，使得 HTML 文件更加简洁和易读。在大括号 {} 内部，列出了一系列的属性-值对，每个属性定义了要应用的样式特性，值则指定了该特性的具体取值。/* 选择器组合 */
Sass详解：颠覆CSS开发的新时代
q_913246828的博客
05-11 220
本文深入探讨了Sass作为CSS的扩展语言的各项特性、优势以及应用场景。Sass提供了诸如变量、嵌套、Mixin等功能，帮助开发者提高开发效率和样式代码的可维护性。同时，Sass在大型项目和团队协作中有着广泛的应用，成为提升前端开发效率和质量的重要工具。
【页面】3D六边形
weixin_44481113的博客
05-11 484
【代码】【页面】3D六边形。
tailwindcss大纲
liu289747235的专栏
05-11 389
paddingmargin-topmargin-topmargin-top。
CSS---Emmet（二）
取个名字太难了a的博客
05-08 206
Emmet语法是一种用于快速编写HTML和CSS的缩写技术。它允许开发者通过简洁的表达式快速生成复杂的代码结构，极大地提高了编码效率。使用Emmet，你只需要写出一些简短的缩写符号和操作符，然后通过快捷键（通常是Tab键）展开它们成为完整的代码。
css背景样式设置
05-26
要设置CSS背景样式，可以使用`background`属性。以下是一些常用的`background`属性的值： ...这个例子将一个`div`元素的背景设置为灰色，同时使用一张名为`background.jpg`的背景图片，不重复，居中显示，尺寸自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怡晗★

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值