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

news2024/11/26 22:28:56

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 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,和我交流。

图片

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

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

相关文章

谷歌浏览器用不了怎么办?

打开谷歌浏览器点击右上角的三个点 &#xff0c; 点击设置 在搜索引擎里面把这个改成百度 然后越狱登录你的谷歌账号就可以用了 我个人用的越狱软件是r2rayn &#xff0c; 浏览器上面可以搜索的 默认浏览器那里可以设置成谷歌

Vue - 你知道Vue2中对象动态新增属性,视图无法更新的原因吗

难度级别:中高级及以上 提问概率:55% 这道题面试官会这样描述,比如有这样一个场景,一个对象里有name属性,可以正常显示在页面中。但后续动态添加了一个age属性,通过调试打印发现对象里的age属性已经添加了上了,但试图中却没有展示出来,…

有了这款开源的电子签就再也不用重复造轮子了!

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

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.题目描…

职场成功的关键因素:如何成为一位优秀的职场人

在竞争激烈的职场环境中&#xff0c;如何脱颖而出&#xff0c;成为一位优秀的职场人&#xff0c;成为了许多职场人士关注的焦点。本文将探讨职场成功的关键因素&#xff0c;帮助您在职场中取得更好的发展。 一、专业技能 专业技能是职场成功的基础。具备扎实的专业技能&#xf…

D-ID介绍以及订阅教程

D-ID 是一家提供人工智能仿真人视频产品服务和开发的公司。 用户只需上传人像照片&#xff0c;输入要说的内容&#xff08;台词&#xff09;&#xff0c;D-ID 就能利用AI 语音机器人自动将用户输入的文字转换成音频&#xff0c;用户甚至还能直接上传录音文件&#xff0c;快速获…

[Mac]安装App后“XX已损坏,无法打开“

问题&#xff1a; “xx.app”已损坏&#xff0c;无法打开。你应该将它移到废纸篓。 解决&#xff1a; 终端输入sudo xattr -r -d com.apple.quarantine 后将Applications中对应的问题app拖入生成路径&#xff0c;然后执行。 $ sudo xattr -r -d com.apple.quarantine /Appli…

做抖店什么东西好卖?什么商品赚钱?抖音小店的选品标准来了!

哈喽~我是电商月月 做抖店&#xff0c;选品决定了一切&#xff01; 而从没接触过抖店的新手朋友&#xff0c;根本不知道什么样的商品才能算的上是好商品 在这里&#xff0c;我不敢告诉大家这个商品好卖&#xff0c;你们快去卖&#xff01;店铺的情况不同&#xff0c;运营方式…

蓝桥杯算法题:练功

【问题描述】 小明每天都要练功&#xff0c;练功中的重要一项是梅花桩。 小明练功的梅花桩排列成 n 行 m 列&#xff0c;相邻两行的距离为 1&#xff0c;相邻两列的距离也为 1。 小明站在第 1 行第 1 列上&#xff0c;他要走到第 n 行第 m 列上。小明已经练了一段时间&#xff…

如何使用固定公网地址SSH远程访问本地内网openEuler系统

文章目录 1. 本地SSH连接测试2. openEuler安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 欧拉操作系统(openEuler, 简称“欧拉”)是面向数字基础设施的操作系统,支持服务器、云计算、边缘openEuler是面向数字基础设施的操作系…

xgo: golang基于-toolexec实现猴子补丁

注&#xff1a; 转载请注明出处&#xff0c; 原文链接。 概述 在这篇博客中&#xff0c;我将详细介绍 xgo 的实现细节。 如果你不知道&#xff0c;xgo 项目位于 https://github.com/xhd2015/xgo。 它的作用很简单&#xff0c;就是在每个 Go 函数的开头添加拦截器&#xff0…

【C++】手搓 list 容器

送给大家一句话&#xff1a; 若结局非你所愿&#xff0c;就在尘埃落定前奋力一搏。—— 《夏目友人帐》 手搓 list 容器 1 前言1. 1 底层结构1.2 使用场景1.3 功能简介 2 框架搭建2.1 节点类2.2 list 类2.3 迭代器类 3 功能实现3.1 begin() 与 end()3.2 插入操作3.3 删除操作…

Ps 滤镜:查找边缘

Ps菜单&#xff1a;滤镜/风格化/查找边缘 Filter/Stylize/Find Edges 查找边缘 Find Edges滤镜能够突出图像中的边缘&#xff0c;同时保留原图的颜色信息。 “查找边缘”滤镜通过分析图像的色彩和亮度变化来识别边缘。 这种处理方式使得图像的主要轮廓以一种艺术化的线条形式被…

SAP ABAP-BOPF基础培训-02 导入、节点和关联

1. 介绍-Introduction 业务对象实例示例&#xff1a;本次案例主要探讨客户发票业务对象内容。ESR中建模的业务对象示例&#xff1a; 发票的结构和属性在ESR中建模。在使用业务对象之前&#xff0c;我们需要首先实现该模型的所有功能。 2. 导入业务对象代理-Importing a Bus…

力扣刷题 二叉树层序遍历相关题目

NO.107 二叉树的层次遍历 II 给定一个二叉树&#xff0c;返回其节点值自底向上的层次遍历。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09; 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1…

面试题:volatile

一旦一个共享变量&#xff08;类的成员变量、类的静态成员变量&#xff09;被volatile修饰之后&#xff0c;那么就具备了两层语义&#xff1a; 1. 保证线程间的可见性 保证了不同线程对这个变量进行操作时的可见性&#xff0c;即一个线程修改了某个变量的值&#xff0c;这新值…

新零售SaaS架构:客户管理系统架构设计(万字图文总结)

什么是客户管理系统&#xff1f; 客户管理系统&#xff0c;也称为CRM&#xff08;Customer Relationship Management&#xff09;&#xff0c;主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理&#xff0c;吸引和留存客户&#xff0c;实现缩短销售周…

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

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

SSM项目转Springboot项目

SSM项目转Springboot项目 由于几年前写的一个ssm项目想转成springboot项目&#xff0c;所以今天倒腾了一下。 最近有人需要毕业设计转换一下&#xff0c;所以我有时间的话可以有偿帮忙转换&#xff0c;需要的私信我或&#xff0b;v&#xff1a;Arousala_ 首先创建一个新的spr…

GD32F470_GP2Y0A02YK0F 红外激光测距传感器 避障测距20-150cm模块移植

2.4 红外测距传感器 GP2Y0A02YKOF是夏普的一款距离测量传感器模块。它由PSD(position sensitive detector)和IRED(infrared emitting diode)以及信号处理电路三部分组成。由于采用了三角测量方法,被测物体的材质、环境温度以及测量时间都不会影响传感器的测量精度。传感器输出电…