CSS 基础:设置背景的 5 个属性及简写 background 注意点

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

263篇原创内容-gzh

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

CSS 中的background背景属性是前端开发中常用的一个属性,它用于控制元素的背景样式,包括背景颜色、背景图片、背景位置等。

本文将详细探讨 CSS 中的background属性,包括 5 个子属性的用法、作用以及实际应用案例,来让我们一起看看吧。

5 个子属性

一、 background-color:用于设置元素的背景颜色。可以使用十六进制值、RGB 值等来指定颜色。例如:

body {
  background-color: #00ff00; /* 使用十六进制值 */
  /* background-color: rgb(255, 0, 0); 使用RGB值 */
  /*background-color: rgba(255, 0, 0, 0.5);  使用带不透明度的RGB值 */
}

关于颜色的几种写法,可以看这篇文章。html基础:颜色的 5 种表示方法(最全!)

当然,这个背景颜色不止可以作用在 body 标签上,也可以为任何 HTML 元素设置背景颜色,比如 div,p,h1,ul,li,input 等,都可以的。

二、 background-image:用于设置元素的背景图片。它的取值形式主要包括以下 4 种:

  1. 图片路径:可以直接指定图片的路径,例如 url('image.jpg')

  2. 线性渐变(Linear Gradient):使用 linear-gradient() 函数来定义线性渐变背景。

  3. 径向渐变(Radial Gradient):使用 radial-gradient() 函数来定义径向渐变背景。

  4. 其他图像类型(Other Image Types):还可以使用其他图像类型,如SVG(Scalable Vector Graphics)图像等。

咱们今天先说最基础的第 1 种,后面的随着深入学习再说。第 1 种是图片路径,是通过url()可以指定图片的路径,可以是相对路径或绝对路径。例如:

body {
  background-image: url(./img/bg1.jpg);
}

页面所用图片 bg1.jpg 图片如下:

图片

当然,背景图像不止可以作用在 body 标签上,也可以为任何 HTML 元素设置背景颜色,比如 div,p,h1,ul,li,input 等,都可以。

三、 background-repeat:用于控制背景图片的重复方式。常用的取值包括:

属性值说明
repeat默认值,背景图片在水平和垂直方向上平铺重复显示。
repeat-x背景图片在水平方向上平铺重复显示。
repeat-y背景图片在垂直方向上平铺重复显示。
no-repeat背景图片不重复,只显示一次。

例如,默认情况下,背景图片在水平和垂直方向上重复显示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url(./img/bg2.png);
      }
    </style>
  </head>
  <body>
    <h1>hello,world!</h1>
    <h2>这背景,有点奇怪......</h2>
  </body>
</html>

页面所用图片 bg2.png 图片如下:

图片

效果如下:

图片

那其实是不是这个照片往一个水平方向比较好啊,所以,就可以让重复方向变为 repeat-x, 那元素的背景图片就会在水平方向上重复显示了。

<style>
  body {
    background-image: url(./img/bg2.png);
    background-repeat: repeat-x;
  }
</style>

效果如下:

图片

其他属性你可以自行试试。

四、 background-position:用于控制背景图片的位置。它的取值有三种类型:

  • 百分比值:指定背景图片位置相对于包含块的百分比。例如,background-position: 50% 50%; 表示背景图片在水平和垂直方向上都居中显示。

  • 像素值:指定背景图片位置相对于包含块的像素值。例如,background-position: 100px 50px; 表示背景图片距离包含块左侧 100 像素,距离顶部 50 像素。

  • 文字类取值。常用的取值包括:

属性值说明
left top背景图片在左上角显示。
left center背景图片在左侧水平居中显示。
left bottom背景图片在左下角显示。
center top背景图片在顶部垂直居中显示。
center center背景图片在水平和垂直方向上都居中显示。
center bottom背景图片在底部垂直居中显示。
right top背景图片在右上角显示。
right center背景图片在右侧水平居中显示。
right bottom背景图片在右下角显示。

例如,将背景图片位置设置在元素的右上角:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      body {
        background-image: url(./img/bg3.png);
        background-repeat: no-repeat;
        background-position: right top;
      }
    </style>
  </head>
  <body>
    <h1>hello,world!像素值:指定背景图片位置相对于包含块的像素值。例如,`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素,距离顶部 50 像素。</h1>

    ...(把h1和内容复制16行,太长了,这里不写了)

    <h1>hello,world!像素值:指定背景图片位置相对于包含块的像素值。例如,`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素,距离顶部 50 像素。</h1>
    <h1>hello,world!像素值:指定背景图片位置相对于包含块的像素值。例如,`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素,距离顶部 50 像素。</h1>
  </body>
</html>

页面所用图片 bg3.png 图片如下:

图片

效果如图所示:

图片

这样设置后,背景图片就会在右上角显示。但是呢,还有一个问题,滚动页面的时候,会发现,图片跟着走了,如图。

图片

能不能滚动的时候,让背景图还固定到头部右上角不动呢?能,这就用到下一个属性了。

五、background-attachment :用于设置背景图片的滚动方式,控制背景图片是否随页面滚动而滚动。

取值有三种:

当然可以,请看下面的表格:

属性值说明
scroll背景图片随页面滚动而滚动,默认值。
fixed背景图片固定在视口的位置,不随页面滚动而滚动。
local背景图片随着其所在的容器滚动而滚动,当容器滚动时,背景图片也跟随滚动,而不是整个页面。

根据上个案例,只需加上 background-attachment: fixed;属性,代码如下,就不会随着页面的滚动而滚动了。

<style>
  body {
    background-image: url(./img/bg3.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed; /* 背景图片固定 */
  }
</style>

效果如图:

图片

这个例子中,背景图片将会固定在浏览器窗口的位置,不会随着页面的滚动而滚动。

这些属性的取值可以根据设计需求灵活使用,可以为网页带来不同的视觉效果和布局。但是每次设置一个背景,需要写5个属性,太多了,能不能一行写完呢?可以。

background 的混合写法

其实呢,通过巧妙地组合不同的背景属性,我们可以创建出丰富多彩的页面背景效果。

如何混合写呢?就以上一个案例来写吧,增加一个绿色的背景颜色。

<style>
  body {
    background: #2cecbc url(./img/bg3.png) no-repeat right top fixed;
  }
</style>

效果如图:

图片

当然,这种写法要注意以下 3 点:

  • 属性顺序:通常情况下,background属性的写法顺序为:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position。这些属性需要全写么?不必,按需。如果某些属性没有设置,则可以省略,但尽量保持顺序不变,比如,我完全可以把#2cecbc,right top去掉,直接就是background: url(./img/bg3.png) no-repeat fixed;,这样也没问题。

  • 简写方式:使用background属性可以简化代码,但需要确保各个属性值的顺序和含义正确,避免混淆和错误。

  • 可读性:尽量保持代码的可读性和易维护性,可以使用注释来说明各个属性的作用和含义,以便他人阅读和理解代码。

这样的设置,也达到了较为简洁而又美观的背景效果。

ok,以上,就是 background 的基础用法了,除了以上 5 个基础子属性,还有background-clipbackground-originbackground-size等,这些需要依赖未来的学习,所以后续用到再说。

也欢迎加我w.x,和我交流。

图片

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实时计算平台设计方案:911-基于6U VPX的光纤图像DSP实时计算平台

基于6U VPX的光纤图像DSP实时计算平台 一、系统组成 该平台基于风冷式的 6U 6槽VPX图像处理平台&#xff0c;包括&#xff1a;计算机主板、计算机主板后板、存储板、图像信号处理板、图像信号处理板后板、图像光纤转接板、机箱背板及机箱组成。图1为系统背板结构示意图&…

TechTool Pro for Mac v19.0.3中文激活版 硬件监测和系统维护工具

TechTool Pro for Mac是一款专为Mac用户设计的强大系统维护和故障排除工具。它凭借全面的功能、高效的性能以及友好的操作界面&#xff0c;赢得了广大用户的信赖和好评。 软件下载&#xff1a;TechTool Pro for Mac v19.0.3中文激活版 作为一款专业的磁盘和系统维护工具&#x…

第八讲 Sort Aggregate 算法

我们现在将讨论如何使用迄今为止讨论过的 DBMS 组件来执行查询。 1 查询计划【Query Plan】 我们首先来看当一个查询【Query】被解析【Parsed】后会发生什么&#xff1f; 当 SQL 查询被提供给数据库执行引擎&#xff0c;它将通过语法解析器进行检查&#xff0c;然后它会被转换…

VueRouter的介绍:什么是路由呢?VueRouter的作用及使用,VueRouter的使用分为5个步骤和特定的2步

1.什么是路由呢&#xff1f; 路由就是路径和组件之间的映射关系&#xff0c;当我们路径变化的时候&#xff0c;就要切换对应的组件。 在前端中解决路径与组件之间的映射关系&#xff0c;官方提供了VueRouter这个插件 2.VueRouter的作用及使用 作用&#xff1a;修改地址栏路…

基于单片机手机屏蔽器系统仿真设计

**单片机设计介绍&#xff0c;基于单片机手机屏蔽器系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机手机屏蔽器系统的仿真设计主要涉及到手机信号屏蔽的原理、单片机控制逻辑设计、仿真软件的选择与使用以…

太厉害了,不愧是字节出来的。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前段时间公司缺人&#xff0c;也面了许多测试&#xff0c;一开始瞄准的就是中级水准&#xff0c…

DolphinScheduler 答案整理,最新面试题

DolphinScheduler的架构设计是怎样的&#xff1f; DolphinScheduler的架构设计主要分为四个层次&#xff1a;前端界面层、API服务层、调度层和执行层。 1、前端界面层&#xff1a; 提供任务的定义、流程的设计、监控等功能&#xff0c;用户通过前端界面操作整个系统。 2、AP…

【AN】简单的实现点击播放影片剪辑再点击暂停的功能

动画故事背景 一个影片剪辑&#xff0c;里面做了一个动画。我希望影片剪辑一开始是暂停的&#xff0c;按钮点击后开始播放&#xff0c;再次点击就暂停&#xff01; 下图那个花瓣就是影片剪辑&#xff0c;里面有个掉落的路径引导动画&#xff01; 1.首先给花瓣影片剪辑一个实例…

恭贺格雷勒管业入围2024进口管道十大品牌

恭贺格雷勒管业入围2024进口管道十大品牌 2024进口管道十大品牌网络评选再次成功举办。格雷勒管道凭借优异的产品质量&#xff0c;再次成功入围。 格雷勒隶属于格勒菲德进出口贸易&#xff08;上海&#xff09;有限公司。德国【格雷勒】在总部德国杜塞尔多夫设置了专业实验室&a…

Master节点快照回退遇到的容器不存在的问题

这次遇到的问题说起来有点扯&#xff0c;k8s集群出了点问题&#xff0c;kuboard无法访问&#xff0c;查看容器状态后&#xff0c;初始问题简单的以为是kuboard出问题了&#xff0c;理论上来说重新安装kuboard即可&#xff0c; 由此问题引发的系统bug&#xff0c;导致master节点…

【算法】第二篇 大衍数列

导航 1. 简介2. 数列特征3. 代码演示1. 简介 大衍数列,来源于《乾坤谱》中对易传“大衍之数五十”的推论。主要用于解释中国传统文化中的太极衍生原理。数列中的每一项,都代表太极衍生过程中,曾经经历过的两仪数量总和。是中华传统文化中隐藏着的世界数学史上第一道数列题。…

本地运行大模型,需要什么样的配置?

本地运行大模型有多爽&#xff1f;只有用过了才知道。 那是一种顺畅、自由的感觉。 比如使用那些主流大模型&#xff0c;最常见的就是网络问题&#xff0c;如 IP 受限&#xff0c;或者服务器压力过大导致的延迟等等。 使用本地大模型&#xff0c;真的是像和人自然交谈那么顺…

LeetCode第十五题:三数之和【15/1000 python】

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 LeetCode解锁1000题: 打怪升级之旅htt…

RabbitMQ 消息重复消费问题

RabbitMQ 消息重复消费问题 解决消息重复消费问题 解决消息重复消费问题 需要在消费端考虑消息的幂等性&#xff1a; 幂等性&#xff1a;对一个接口的多次调用和一次调用得到的结果都是一样的 使用数据库的唯一越苏保证幂等性。

应用程序无法正常启动怎么办,应用程序无法正常启动解决方法

电脑使用过程中会碰到各种问题&#xff0c;比如说&#xff0c;有些时候打开应用可能会失败&#xff0c;与此同时还会出现某些提示。最近有用户就遇到了打开软件就提示“应用程序无法正常启动0xc000007b”&#xff0c;这个问题是很常见的&#xff0c;一般是某部分组件损坏导致的…

LeetCode刷题之105. 从前序与中序遍历序列构造二叉树

文章目录 1.题目描述2. 分析2.1 前序遍历2.1.1 什么是前序遍历&#xff1f;2.1.2 前序遍历有什么特点&#xff1f; 2.2 中序遍历2.2.1 什么是中序遍历2.2.2 中序遍历有什么特点&#xff1f; 2.3 后序遍历2.3.1 什么是后序遍历&#xff1f;2.3.2 特点 2.4 总结 3. 解法 1.题目描…

【算法基础】选择排序与冒泡排序的思想与实现

文章目录 1. 选择排序1.1 思想1.2 实现 2. 冒泡排序2.1 思想2.2 实现 1. 选择排序 1.1 思想 选择排序的思想很简单&#xff0c;如上图所示。在每一次遍历子数组的过程中&#xff0c;选择最小的和子数组的第一位交换。子数组的选择从一开始的整个数组&#xff0c;到后面范围逐渐…

Vue2(十四):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置

一、路由的简介 vue-rooter&#xff1a;是vue的一个插件库&#xff0c;专门用来实现SPA应用 1.对SPA应用的理解 1、单页 Web 应用&#xff08;single page web application&#xff0c;SPA&#xff09;。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链…

CVE-2023-2928 DedeCMS 文件包含漏洞getshell 漏洞分析

DedeCMS&#xff08;也称为织梦CMS&#xff09;是一款基于PHPMySQL的开源内容管理系统。 在 DedeCMS 5.7.106 及之前的版本中发现一个漏洞。它已被宣布为关键。受此漏洞影响的是未知功能的文件uploads/dede/article_allowurl_edit.php。对参数 allurls 的操作会导致代码注入。…