程序员经验分享-hwhale

CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂）

2023-10-27

目录

CSS背景

CSS 背景色

实例

其他元素

实例

不透明度 / 透明度

实例

使用 RGBA 的透明度

实例

CSS 背景图像

实例

实例

实例

CSS 背景重复

实例

实例

CSS background-repeat: no-repeat

实例

CSS background-position

实例

CSS 背景附着

实例

实例

CSS 简写背景属性

实例

所有 CSS 背景属性

总结 

CSS背景

CSS 背景属性用于定义元素的背景效果。

我们将学习如下 CSS 背景属性：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS 背景色

background-color 属性指定元素的背景色。

实例

页面的背景色设置如下：

body {
  background-color: lightblue;
}

亲自试一试

通过 CSS，颜色通常由以下方式指定：

  • 有效的颜色名称 - 比如 "red"
  • 十六进制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"

请查看 CSS 颜色值，获取可能颜色值的完整列表。

其他元素

可以为任何 HTML 元素设置背景颜色：

实例

在这里，<h1>、<p> 和 <div> 元素将拥有不同的背景色：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

亲自试一试

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

实例

div {
  background-color: green;
  opacity: 0.3;
}

亲自试一试

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

如果不希望对子元素应用不透明度，例如上面的例子，可以使用 RGBA 颜色值。

下面的例子设置背景色而不是文本的不透明度：

从我们的 CSS 颜色 章节中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

亲自试一试

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}

亲自试一试

实例

本例展示了文本和背景图像的错误组合。文字难以阅读：

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

亲自试一试

注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

实例

p {
  background-image: url("paper.gif");
}

亲自试一试

CSS 背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

body {
  background-image: url("gradient_bg.png");
}

亲自试一试

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

实例

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

亲自试一试

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

实例

背景图像仅显示一次：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

亲自试一试

在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。

CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

亲自试一试

CSS 背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

实例

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

亲自试一试

实例

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

亲自试一试

CSS 简写背景属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能够使用简写属性 background：

实例

使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

亲自试一试

在使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

所有 CSS 背景属性

属性 描述
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。

总结 

本节介绍了CSS背景相关知识。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS入门进阶与实战

css

html

前端

CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂） 的相关文章

  • 如何解决此错误：属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

  • 如何设置视频文件的预览，从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地

  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript

  • 如何使自定义 Web 组件可聚焦？

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么

  • jQuery mobile 中的文本区域高度和宽度？

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML

  • div 中的中心文本？

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical

  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他

  • 导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包

  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没

  • -webkit-box-shadow 与 QtWebKit 模糊？

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显

  • 如何停止TinyMCE删除span标签？

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使

  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象？

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

  • 如何从浏览器向服务器发送“页面将关闭”消息？

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message

  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee

随机推荐

  • Linux下安装jre

    Linux下安装Java运行环境 现需要项目部署到Linux中 需要配置java运行环境 注 以下测试环境系统为centOS 用户为超级管理员 jre8 1 下载最新版的jre 服务器环境下不需要配置jdk 下载地址如下 http www

  • microsoft visual c++ 6.0中文版两种使用方法

    microsoft visual c 6 0 是一款语言编程软件 那么很多人都不知道microsoft visual c 6 0中文版怎么使用 其实使用方法很简单哦 只要打开microsoft visual c 6 0中文版就可以进行语言编

  • 《数据结构》 图的创建与遍历 代码表示

    测试数据 10 15 共10个顶点 15条边 0 1 0 8 0 0 第一 二个数表示连接两个顶点的起始顶点 第三个数1表示单通行 0表示双向通行 4 8 1 5 4 0 5 9 1 0 6 0 7 3 1 8 3 1 2 5 0 2 1

  • c#排列组合算法

    Combinatorics cs代码清单 using System using System Collections using System Data

  • 二叉树所有节点转换成大于该节点的平均值，没有最大值就转换成0

    import java util ArrayList import java util List import java util function ToIntFunction import java util stream Collect

  • CUnit（单元测试框架）

    CUnit是一个用C语言编写 管理和运行单元测试的轻量级系统 它为C程序员提供了具有灵活多样用户界面的基本测试功能 CUnit是作为一个静态库构建的 它与用户的测试代码链接在一起 它使用一个简单的框架来构建测试结构 并为测试公共数据类型提供

  • Buildroot制作根文件系统过程（基于MYD-AM335X开发板）

    buildroot的功能很强大 可以利用它制作交叉编译工具链 根文件系统 甚至可以构建多种嵌入式平台的bootloader linux 下面以米尔科技的MYD AM335X平台为例展示如何利用buildroot制作自己所需的根文件系统 一

  • 柔性OLED拼接屏有哪些场景化应用？

    柔性OLED拼接屏是一种新型的显示技术 它采用了柔性OLED屏幕 可以实现多个屏幕的拼接 形成一个大屏幕显示 这种技术可以应用于各种场合 如商业展示 广告宣传 会议演示等 柔性OLED屏幕是一种新型的显示技术 它采用了柔性材料作为基底 可以

  • java基于ssm+vue的共享充电宝管理系统 elementui

    随着时代的发展 人们的生活越来越离不开手机 但是因为技术水平等原因的限制 手机的电池并没有人们想象中的那么耐用 很多时候人们在外出的时候 很可能会遇到手机没电的情况发生 作为日常通讯的必备工具 如果没电了 很可能会影响一些重要的事情 尤其是

  • 3D相机调研

    最近因为自己实验需要配置一个3D相机 安装在机械臂上实现eye in arm的自动化引导过程 调研结果记录如下 3D相机又称为深度相机 即通过该相机能检测出拍摄空间的景深距离 与普通相机 2D的最大区别 普通彩色相机 2D相机 拍摄到的图片

  • JS -- input输入框只能输入正整数

    摘自文章 input输入框只能输入正整数 半城烟沙的技术博客 51CTO博客 one

  • 最大比例

    X星球的某个大奖赛设了M级奖励 每个级别的奖金是一个正整数 并且 相邻的两个级别间的比例是个固定值 也就是说 所有级别的奖金数构成了一个等比数列 比如 16 24 36 54 其等比值为 3 2 现在 我们随机调查了一些获奖者的奖金数 请你

  • 面试题深入思考01-----Arrays.sort()与Collections.sort()

    面试题深入思考01 Arrays sort 与Collections sort 1 Collections sort Collections本质是关于集合的一种工具类 其中包含对集合的各种api 例如排序 反转 交换和复制等 其中sort方

  • word怎么恢复保存前的文件，word文件恢复

    我们在使用word编辑文档时偶尔会有误删除文档的经历 word要怎么恢复保存前的文件呢 本文为你提供了五种解决思路 你可以通过搜索word文档的备份文档 自动恢复文件 临时文件 回收站 第三方数据恢复软件找到文档 方法一 搜索 Word 备

  • katex

    Katex Accents Accent functions inside text Delimiters Delimiter Sizing Environments Letters and Unicode Other Letters Un

  • Android ----蓝牙架构

    蓝牙 1 fromwork 2 service 3 driver Bluetooth apk bluedroid 芯片厂家 fromwork到service直接调用 service到driver利用service调用 fromwork到dr

  • 【机器学习 - 4】：线性回归算法

    文章目录 线性回归 线性回归的理解 损失函数 简单线性回归 封装线性回归算法 线性回归算法 在sklearn中调用线性回归算法 向量化运算 线性回归模型中的误差 均方误差 MSE 均方根误差 平均绝对误差 调用sklearn中的均方根误差和

  • 位置式和增量式PID控制

    PID控制是一个二阶线性控制器 定义 通过调整比例 积分和微分三项参数 使得大多数的工业控制系统获得良好的闭环控制性能 优点 a 技术成熟 b 易被人们熟悉和掌握 c 不需要建立数学模型 d 控制效果好 e 鲁棒性 通常依据控制器输出与执行

  • 测试管理之测试过程

    测试过程 以此文来阐述自己对于测试过程的认识 目录 文章目录 目录 过程分类 测试过程主要分为测试前 测试中 测试完成 发布后 测试前 测试前注意事项 需求评审 参与评审 了解需求背景 需求详情以及需求价值 初步评估需求覆盖面 需求测试工作

  • CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂）

    目录 CSS背景 CSS 背景色 实例 其他元素 实例 不透明度 透明度 实例 使用 RGBA 的透明度 实例 CSS 背景图像 实例 实例 实例 CSS 背景重复 实例 实例 CSS background repeat no repeat

热门标签