CSS背景设置

news2024/11/16 16:34:15

目录

背景颜色

背景图片

背景平铺

背景图片位置

背景图片固定

背景样式综合书写

背景色半透明

通过 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>

效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1605428.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Count the Values of k

Count the Values of k

目录 题目总览 思路 参考代码 原题链接&#xff1a; CF1933C Turtle Fingers: Count the Values of k 题目总览 # Turtle Fingers: Count the Values of k ## 题面翻译 给你三个**正**整数 $a$ 、 $b$ 和 $l$ ( $a,b,l>0$ )。 可以证明&#xff0c;总有一种方法可以选择*…
阅读更多...
机器学习——模型融合：Stacking算法

机器学习——模型融合：Stacking算法

机器学习——模型融合&#xff1a;Stacking算法 在机器学习中&#xff0c;模型融合是一种常用的方法&#xff0c;它可以提高模型的泛化能力和预测性能。Stacking算法&#xff08;又称为堆叠泛化&#xff09;是一种强大的模型融合技术&#xff0c;它通过组合多个基本分类器的预…
阅读更多...
hive了解系列一

hive了解系列一

“ 随着智能手机的普及&#xff0c;互联网时代红利的爆发&#xff0c;用户数量和产生的数据也越发庞大。为了解决这个问题&#xff0c;提高数据的使用价值。 Hadoop生态系统就被广泛得到应用。 在早期&#xff0c;Hadoop生态系统就是为处理如此大数据集而产生的一个合乎成本效益…
阅读更多...
C# 整数转罗马数字

C# 整数转罗马数字

罗马数字包含以下七种字符:I&#xff0c;V&#xff0c;X&#xff0c;L&#xff0c;C,D和M。 例如&#xff0c;罗马数字2写做 II &#xff0c;即为两个并列的 1。12 写做XII&#xff0c;即为XII。27写做 XXVII,即为XXV II 。 通常情况下&#xff0c;罗马数字中小的数字在大的数字…
阅读更多...
MoJoCo 入门教程（七）XML 参考

MoJoCo 入门教程（七）XML 参考

系列文章目录 前言 表格第二列中的符号含义如下&#xff1a; ! 必填元素&#xff0c;只能出现一次 ? 可选元素&#xff0c;只能出现一次 * 可选元素&#xff0c;可多次出现 R 可选元素&#xff0c;可递归出现多次 一、简介 本章是 MuJoCo 中使用的 MJCF 建模语言的参考手册。…
阅读更多...
03-JAVA设计模式-享元模式

03-JAVA设计模式-享元模式

享元模式 什么是享元模式 享元模式&#xff08;Flyweight Pattern&#xff09;是一种对象结构型设计模式&#xff0c;用于减少创建对象的数量&#xff0c;以减少内存占用和提高系统性能。它通过共享已经存在的对象来避免创建大量相似的对象&#xff0c;从而降低内存消耗。 在…
阅读更多...
vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描

vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描

文章目录 功能场景生成条形码设置打印功能踩坑 功能场景 功能场景&#xff1a;供应链中对一些货品根据赋码规则进行赋码&#xff0c;赋码之后生成根据赋码结果生成条形码&#xff0c;执行打印功能&#xff0c;贴在货品之上&#xff0c;打印之后可以用pda的手枪进行扫描&#x…
阅读更多...
蓝桥杯2024年第十五届省赛真题-数字接龙

蓝桥杯2024年第十五届省赛真题-数字接龙

思路&#xff1a;DFS&#xff0c;因为输入的i&#xff0c;j的顺序导致&#xff0c;方向向量中x是行编号&#xff0c;y是列编号。方向向量可能和直觉上不同。 错的 //int dx[8]{0,1,1,1,0,-1,-1,-1}; //int dy[8]{1,1,0,-1,-1,-1,0,1}; 对的 int dx[]{-1,-1,0,1,1,1,0,-1}; int…
阅读更多...
Hotcoin4月16日上新热门资产：头部RWA技术提供方Centrifuge（CFG）

Hotcoin4月16日上新热门资产：头部RWA技术提供方Centrifuge（CFG）

Hotcoin持续为全球600万用户发掘优质潜力资产&#xff0c;热门币种交易上热币。一文快速了解今日上新资产:Centrifuge(CFG) 推荐指数 8.2 交易对 CFG/USDT 交易时间 4月16日 19:00 资产赛道 RWA 项目简介 Centrifuge是一个去中心化资产融资协议&#xff0c;专注于释放现实世界资…
阅读更多...
计算机视觉——基于OpenCV和Python进行模板匹配

计算机视觉——基于OpenCV和Python进行模板匹配

模板匹配&#xff1f; 模板匹配是它允许在一幅较大的图像中寻找是否存在一个较小的、预定义的模板图像。这项技术的应用非常广泛&#xff0c;包括但不限于图像识别、目标跟踪和场景理解等。 目标和原理 模板匹配的主要目标是在一幅大图像中定位一个或多个与模板图像相匹配的…
阅读更多...
05.MySQL索引事务

05.MySQL索引事务

1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。 可以对表中的一列或多列创建索引&#xff0c;并指定索引的类型&#xff0c;各类索引有各自的数据结构实现 1.2 作用 数据库中的表、数据、索引之间的关系&#xff0c;类似于书架上的…
阅读更多...
链表创建的陷阱与细节

链表创建的陷阱与细节

链表是线性表的一种&#xff0c;它在逻辑结构上是连续的&#xff0c;在物理结构上是非连续的。 也就是说链表在物理空间上是独立的&#xff0c;可能是东一块西一块的。如下顺序表和链表在内存空间上的对比&#xff1a; 而链表的每一块空间是如何产生联系实现在逻辑结构上是连续…
阅读更多...
pycharm永久改变sys.path

pycharm永久改变sys.path

进入pycharm&#xff0c;选择file->settings->interpreter 在这里选择图中所示show all 再单击左上角减号右侧第三个&#xff0c;长得像思维导图的图标 之后添加你的路径&#xff0c;确认即可
阅读更多...
vim使用指南：指令、配置、插件、异常

vim使用指南：指令、配置、插件、异常

文章目录 vi / vim命令模式插入模式光标定位复制粘贴删除撤销替换删除查找 底行模式保存退出行号查找多开其他 视图模式注释 异常vim配置vim插件 vi / vim vim的本质是一个编辑器&#xff0c;是一种多模式的编辑器&#xff0c;只能进行读写操作&#xff0c;不能进行编译编辑器…
阅读更多...
jmeter-while控制器用法

jmeter-while控制器用法

condition中添加while结束循环的条件&#xff0c;以下语句的意思是&#xff0c;当percent等于100时&#xff0c;就跳出while循环继续执行 ${__javaScript("${percent}" ! 100)} 举例&#xff0c;以下方法是getPercent为一个引出的异步接口&#xff0c;该接口的返回包…
阅读更多...
uni-admin中引入uni-cms的缺少schema及uni-media-library缺少云函数的问题

uni-admin中引入uni-cms的缺少schema及uni-media-library缺少云函数的问题

1. 在管理端运行提示一些表找不到&#xff0c;因为是uni-admin关联的uni-starter的服务空间&#xff0c;在uni-admin的uniCloud中没有内容&#xff0c;在uni-starter的uniCloud中也没有发现对应的表&#xff0c;后面干脆在云端找到对应的表之后新建了&#xff0c;然后再下载到本…
阅读更多...
盲人导航功能特点：革新出行体验的实时避障应用深度解析

盲人导航功能特点：革新出行体验的实时避障应用深度解析

作为一名资深记者&#xff0c;我有幸亲历并详尽报道一款专为盲人群体设计的导航应用叫做蝙蝠避障&#xff0c;它不仅提供了精准的路线指引&#xff0c;更创新性地融入了实时避障功能。这款应用凭借其盲人导航功能特点&#xff0c;正以前所未有的方式提升盲人的出行自由度与安全…
阅读更多...
https证书是什么，怎么申请

https证书是什么，怎么申请

https证书的名称有很多&#xff0c;其本名是SSL/TLS数字证书&#xff0c;本意是实现https访问的证书&#xff0c;故而很多人会称之为https证书&#xff0c;又因为其需要部署于域名服务器之上&#xff0c;所以也有人称之为域名证书。 所以https证书又名SSL证书、域名证书等。 h…
阅读更多...
【Web】Dest0g3 520迎新赛 题解(全)

【Web】Dest0g3 520迎新赛 题解(全)

目录 phpdest EasyPHP SimpleRCE funny_upload EasySSTI middle PharPOP ezip NodeSoEasy Really Easy SQL&easysql EzSerial ljctr phpdest 尝试打pearcmd&#xff0c;但似乎没有写文件的权限 ?config-create/&file/usr/local/lib/php/pearcmd.php&a…
阅读更多...
FreeRTOS_day3

FreeRTOS_day3

1.总结任务调度算法之间的区别&#xff0c;重新实现一遍任务调度算法的代码。 抢占式调度&#xff1a;高优先级的任务可以打断低优先级的任务执行 时间片轮转&#xff1a;相同优先级的任务有相同的时间片&#xff08;1ms&#xff09;&#xff0c;时间片耗尽任务会强制退出 协…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023