当前位置： 首页 > news >正文

css的背景background属性

news 文章来源：https://blog.csdn.net/m0_71190099/article/details/142605150 2024/12/28 2:36:56

CSS的background属性是一个简写属性，它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码，使其更加清晰和易于维护。background属性可以设置不同的子属性。

background子属性

  • 定义背景颜色

使用background-color属性

格式：background-color：#ff0000; /* 蓝色 */

也可以直接用background属性

格式：background：#ff0000; /* 蓝色 */

两种方式写出来的效果是一样的。

属性值可以是颜色名、十六进制值、RGB、RGBA、HSL、HSLA或其他CSS颜色值。

  • 定义背景图像

使用background-image属性

格式：background-image：url('background-image.jpg');

属性值可以是URL路径、线性渐变、径向渐变等。

  • 定义背景图像的重复方式

使用background-repeat属性

格式：background-repeat：no-repeat;

属性值：

repeat：背景图像在垂直和水平方向上重复。

repeat-x：背景图像只在水平方向上重复。

repeat-y：背景图像只在垂直方向上重复。

no-repeat：背景图像不重复。

  • 定义背景图像的位置

使用background-position属性

格式：background-position：center;

属性值可以是关键词（如top、bottom、left、right、center）或长度值，或两者的组合，常用的就是center。

  • 定义背景图像的尺寸（CSS3）

使用background-size属性

格式：background-size：cover;

属性值：

长度值 或者 百分比

cover：覆盖整个元素区域

contain：完全包含在元素内

  • 定义背景图像是否固定或者随着页面滚动（CSS3）

使用background-attachment属性

格式：background-attachment：fixed;

属性值：

scroll：背景图像随着页面滚动。

fixed：背景图像固定，页面滚动时不动。

local：背景图像随着元素的内容滚动。

  • 定义背景的绘制区域（CSS3）

使用background-clip属性

background-clip控制的是背景的可见区域，即背景绘制到哪里停止。

格式：background-clip：border-box;

属性值：

border-box：背景延伸到边框内侧边缘。

padding-box：背景延伸到内边距内侧边缘，不包括边框。

content-box：背景仅延伸到内容区域，不包括内边距和边框。

text：背景将剪切并贴合文本，这是比较新的属性值，可能不是所有浏览器都支持。

  • 定义背景定位的起始位置（CSS3）

使用background-origin属性

background-origin控制的是背景的定位起点，即从哪里开始定位背景。

格式：background-origin：content-box;

属性值：

border-box：背景定位相对于边框盒。

padding-box：背景定位相对于内边距盒，这是默认值。

content-box：背景定位相对于内容盒。

background属性

background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。
使用background简写属性可以一次性设置多个背景属性，但如果需要设置的属性不全，也可以只设置其中的一部分。如果某个子属性未被设置，它将使用其默认值。

复合属性的优点：

  • 简化代码：使用一个属性设置多个背景样式，代码更简洁。

  • 易于维护：更新背景样式时，只需要修改一个地方。

  • 兼容性：如果某个浏览器不支持某个子属性，整个复合属性仍然可以正常工作。

注意事项：

  • 如果要设置的所有子属性都需要定义，可以使用复合属性。

  • 如果只需要设置部分子属性，建议单独设置，以避免不必要的复杂性。

使用 background 复合属性可以提高CSS的编写效率，但需要确保按照正确的顺序设置各个子属性。

示例

代码：

<!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{ display: flex; flex-wrap: wrap; }div{width: 100px;height: 100px;text-align: center;  /* 文本居中 */border: 1px solid #000;  /* 边框线 为了标记每个div盒子 */}.p1{background-color: #0000ff;  /* 背景色 */}.p2{background: #ff0000;  /* 背景色 */}.p3{background-image: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253');  /* 背景图 */background-position: center;  /* 背景定位 中心 */background-repeat: no-repeat;  /* 背景图是否重复平铺 不重复 */background-size: cover;  /* 背景图尺寸 铺满 */}.p4{background: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253') no-repeat center;background-size: cover;  /* background不支持cover属性 单独书写 */}</style>
</head>
<body><div class="p1">文本1</div><div class="p2">文本2</div><div class="p3">文本3</div><div class="p4">文本4</div>
</body>
</html>

效果图：

相关文章：

css的背景background属性

CSS的background属性是一个简写属性&#xff0c;它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码&#xff0c;使其更加清晰和易于维护。background属性可以设置不同的子属性。 background子属性 定义背景颜色 使用background-color属性 格式&#x…...

编程日记 2024/10/3 14:08:17

Cypress自动化测试实战：构建高效的前端测试体系

在快速迭代的软件开发环境中&#xff0c;前端自动化测试是保证代码质量和用户体验的重要手段。Cypress作为一款功能强大的前端自动化测试工具&#xff0c;凭借其丰富的特性、直观的API和高效的测试执行速度&#xff0c;赢得了众多开发者和测试团队的青睐。本文将深入探讨Cypres…...

编程日记 2024/10/3 14:06:15

【YOLO学习】YOLOv2详解

文章目录 1. 概述2. Better2.1 Batch Normalization&#xff08;批归一化&#xff09;2.2 High Resolution Classifier&#xff08;高分辨率分类器&#xff09;2.3 Convolutional With Anchor Boxes&#xff08;带有Anchor Boxes的卷积&#xff09;2.4 Dimension Clusters&…...

编程日记 2024/10/3 14:05:14

windows 录音编码为flv格式时，pcm采样格式

这里使用的是0x3e&#xff0c;转换为二进制&#xff1a; 0 0 1 1 1 1 1 0 前四个字节为3&#xff0c;表示Linear Pcm, 后4个字节1 1 1 0 表示44100HZ采样&#xff0c; 16个bit&#xff0c;单声道。 故&#xff0c;windows 音频采样不支持48000HZ频率...

编程日记 2024/10/3 14:04:13

Qt开发技巧（九）去掉切换按钮，直接传样式文件，字体设置，QImage超强，巧用Qt的全局对象，信号槽断连，低量数据就用sqlite

继续讲一些Qt开发中的技巧操作&#xff1a; 1.去掉切换按钮 QTabWidget选项卡有个自动生成按钮切换选项卡的机制&#xff0c;有时候不想看到这个烦人的切换按钮&#xff0c;可以设置usesScrollButtons为假&#xff0c;其实QTabWidget的usesScrollButtons属性最终是应用到QTabWi…...

编程日记 2024/10/3 14:00:09

51c自动驾驶~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/11466109 #HTCL 超过所有视觉方案&#xff01;HTCL&#xff1a;分层时间上下文问鼎OCC 本文是对ECCV2024接受的文章 HTCL: 的介绍&#xff0c;HTCL在SemanticKITTI基准测试中超过了所有基于相机的方法&#xff0c;甚至在和…...

编程日记 2024/10/3 13:57:06

Star 3w+，向更安全、更泛化、更云原生的 Nacos3.0 演进

作者&#xff1a;席翁 Nacos 社区刚刚迎来了 Star 突破 30000 的里程碑&#xff0c;从此迈上了一个新的阶段。感谢大家的一路支持、信任和帮助&#xff01; Nacos /nɑ:kəʊs/是 Dynamic Naming and Configuration Service 的首字母简称&#xff0c;定位于一个更易于构建云原…...

编程日记 2024/10/3 13:56:05

PHP魔幻（术）方法

PHP中的魔幻方法&#xff0c;也被称为魔术方法&#xff08;Magic Methods&#xff09;&#xff0c;是一组具有特殊功能的方法。这些方法在PHP中有固定的名称&#xff0c;并且会在特定的时机自动被PHP调用&#xff0c;而无需开发者显式调用。它们通常用于执行一些特殊的操作&…...

编程日记 2024/10/3 13:54:03

VS开发 - 静态编译和动态编译的基础实践与混用

目录 1. 基础概念 2. 直观感受一下静态编译和动态编译的体积与依赖项目 3. VS运行时库包含哪些主要文件&#xff08;从VS2015起&#xff09; 4. 动态库和静态库混用的情况 5. 感谢清单 1. 基础概念 所谓的运行时库&#xff08;Runtime Library&#xff09;就是WINDOWS系统…...

编程日记 2024/10/3 13:53:03

Golang | Leetcode Golang题解之第451题根据字符出现频率排序

题目&#xff1a; 题解&#xff1a; func frequencySort(s string) string {cnt : map[byte]int{}maxFreq : 0for i : range s {cnt[s[i]]maxFreq max(maxFreq, cnt[s[i]])}buckets : make([][]byte, maxFreq1)for ch, c : range cnt {buckets[c] append(buckets[c], ch)}an…...

编程日记 2024/10/3 13:48:58

零信任如何增强网络物理系统 (CPS) 安全性

远程访问对于管理关键基础设施至关重要&#xff0c;因为它允许企业优化和扩展运营并保持效率。然而&#xff0c;它也带来了许多安全漏洞&#xff0c;而且随着连接设备数量的增加&#xff0c;这些漏洞只会越来越多。 到 2025 年&#xff0c;企业和消费者环境中的物联网设备数量…...

编程日记 2024/10/3 13:47:57

V3D——从单一图像生成 3D 物体

导言 论文地址&#xff1a;https://arxiv.org/abs/2403.06738 源码地址&#xff1a;https://github.com/heheyas/V3D.git 人工智能的最新进展使得自动生成 3D 内容的技术成为可能。虽然这一领域取得了重大进展&#xff0c;但目前的方法仍面临一些挑战。有些方法速度较慢&…...

编程日记 2024/10/3 13:46:56

计算机网络期末复习真题（附真题答案）

前言&#xff1a; 本文是笔者在大三学习计网时整理的笔记&#xff0c;哈理工的期末试题范围基本就在此范畴内&#xff0c;就算真题有所更改&#xff0c;也仅为很基础的更改数值&#xff0c;大多跑不出这些题&#xff0c;本文包含简答和计算等大题&#xff0c;简答的内容也可能…...

编程日记 2024/10/3 13:45:55

Unity 的 UI Event System 是一个重要的框架

Unity 的 UI Event System 是一个重要的框架&#xff0c;用于处理用户界面中的输入事件。以下是它的主要特点和功能&#xff1a; 1. 事件管理 UI Event System 负责捕获和管理来自用户的输入事件&#xff0c;如鼠标点击、触摸、键盘输入等。 2. 事件传播 事件通过层次结…...

编程日记 2024/10/3 13:43:53

第十三章 集合

一、集合的概念 集合&#xff1a;将若干用途、性质相同或相近的“数据”组合而成的一个整体 Java集合中只能保存引用类型的数据&#xff0c;不能保存基本类型数据 数组的缺点&#xff1a;长度不可变 Java中常用集合&#xff1a; 1.Set(集):集合中的对象不按特定方式排序&a…...

编程日记 2024/10/3 13:41:52

子非线程池中物

线程池&#xff0c;又好上了 有任务队列 任务要处理就直接放到里面 预先创建好线程&#xff0c;本质上也是一个生产消费模型 线程池真是麻烦啊 我们可以直接沿用之前写过的代码&#xff0c;Thread.hpp: #pragma once #include <iostream> #include <functional&…...

编程日记 2024/10/3 13:40:50

Unraid的cache使用btrfs或zfs？

Unraid的cache使用btrfs或zfs&#xff1f; 背景&#xff1a;由于在unraid中添加了多个docker和虚拟机&#xff0c;因此会一直访问硬盘。然而&#xff0c;单个硬盘实在难以让人放心。在阵列盘中&#xff0c;可以通过添加校验盘进行数据保护&#xff0c;在cache中无法使用xfs格式…...

编程日记 2024/10/3 13:38:48

微服务实战——平台属性

平台属性 中间表复杂业务 /*** 获取分类规格参数&#xff08;模糊查询&#xff09;** param params* param catelogId* param type type"base"时查询基础属性&#xff0c;type"sale"时查询销售属性* return*/ Override public PageUtils listByCatelogId…...

编程日记 2024/10/3 13:37:47

半监督学习与数据增强（论文复现）

半监督学习与数据增强&#xff08;论文复现&#xff09; 本文所涉及所有资源均在传知代码平台可获取 文章目录 半监督学习与数据增强&#xff08;论文复现&#xff09;概述算法原理核心逻辑效果演示使用方式 概述 本文复现论文提出的半监督学习方法&#xff0c;半监督学习&…...

编程日记 2024/10/3 13:35:45

css3-----2D转换、动画

2D 转换&#xff08;transform&#xff09; 转换&#xff08;transform&#xff09;是CSS3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果 移动&#xff1a;translate旋转&#xff1a;rotate缩放&#xff1a;scale 二维坐标系 2D 转换之移动 trans…...

编程日记 2024/10/3 13:34:44

SQL进阶技巧：统计各时段观看直播的人数

目录 0 需求描述 1 数据准备 2 问题分析 3 小结 如果觉得本文对你有帮助&#xff0c;那么不妨也可以选择去看看我的博客专栏 &#xff0c;部分内容如下&#xff1a; 数字化建设通关指南 专栏 原价99&#xff0c;现在活动价39.9&#xff0c;十一国庆后将上升至59.9&#…...

编程日记 2024/10/3 13:31:41

Stream流的终结方法

1.Stream流的终结方法 2.forEach 对于forEach方法&#xff0c;用来遍历stream流中的所有数据 package com.njau.d10_my_stream;import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.function.Consumer; import java.util…...

编程日记 2024/10/3 13:28:38

JavaWeb——Vue组件库Element（4/6）：案例：基本页面布局（基本框架、页面布局、CSS样式、完善布局、效果展示，含完整代码）

目录 步骤 基本页面布局 基本框架 页面布局 CSS样式 完善布局 效果展示 完整代码 Element 的基本使用方式以及常见的组件已经了解完了&#xff0c;接下来要完成一个案例&#xff0c;通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例&am…...

编程日记 2024/10/3 13:27:37

【c++】 模板初阶

泛型编程 写一个交换函数&#xff0c;在学习模板之前&#xff0c;为了匹配不同的参数类型&#xff0c;我们可以利用函数重载来实现。 void Swap(int& a, int& b) {int c a;a b;b c; } void Swap(char& a, char& b) {char c a;a b;b c; } void Swap(dou…...

编程日记 2024/10/3 13:26:36

R 语言 data.table 大规模数据处理利器

前言 最近从一个 python 下的 anndata 中提取一个特殊处理过的单细胞矩阵&#xff0c;想读入R用来画图&#xff08;个人比较喜欢用R可视化 &#xff09;&#xff0c;保存之后&#xff0c;大概几个G的CSV文件&#xff0c;如果常规方法读入R&#xff0c;花费的时间比较久&#x…...

编程日记 2024/10/3 13:24:33

Java 静态代理详解：为什么代理类和被代理类要实现同一个接口？

在 Java 开发中&#xff0c;代理模式是一种常用的设计模式&#xff0c;其中代理类的作用是控制对其他对象的访问。代理模式分为静态代理和动态代理&#xff0c;在静态代理中&#xff0c;代理类和被代理类都需要实现同一个接口。这一机制为实现透明的代理行为提供了基础&#xf…...

编程日记 2024/10/3 13:23:33

OpenCV C++霍夫圆查找

OpenCV 中的霍夫圆检测基于 霍夫变换 (Hough Transform)&#xff0c;它是一种从边缘图像中识别几何形状的算法。霍夫圆检测是专门用于检测图像中的圆形形状的。它通过将图像中的每个像素映射到可能的圆参数空间&#xff0c;来确定哪些像素符合圆形状。 1. 霍夫变换的原理 霍夫…...

编程日记 2024/10/3 13:16:28

H.264编解码介绍

一、简介 H.264，又称为AVC（Advanced Video Coding），是一种广泛使用的视频压缩标准。它由国际电信联盟（ITU）和国际标准化组织（ISO）联合开发，并于2003年发布。 H.264的发展历史可以追溯到上个世纪90年代。当时，视频压缩技术的主要标准是MPEG-2，但它在压缩率和视频质…...

编程日记 2024/10/3 13:15:27

Java | Leetcode Java题解之第450题删除二叉搜索树中的节点

题目&#xff1a; 题解&#xff1a; class Solution {public TreeNode deleteNode(TreeNode root, int key) {TreeNode cur root, curParent null;while (cur ! null && cur.val ! key) {curParent cur;if (cur.val > key) {cur cur.left;} else {cur cur.rig…...

编程日记 2024/10/3 13:14:26

【CViT】Deepfake Video Detection Using Convolutional Vision Transformer

文章目录 Deepfake Video Detection Using Convolutional Vision Transformerkey points**卷积视觉变压器**FLViT实验总结Deepfake Video Detection Using Convolutional Vision Transformer 会议/期刊：2021 作者： key points 提出了一种用于检测深度伪造的卷积视觉变压器…...

编程日记 2024/10/3 13:10:23

微商城网站建设策划书/宁波seo推广

Python 的模块可以按目录组织为包创建一个包的步骤是&#xff1a;1. 建立一个名字为包名字的文件夹2. 在该文件夹下创建一个__init__.py 文件3. 根据需要再该文件夹下存放脚本文件、已编译扩展及子包4. import pack.m1, pack.m2, pack.m35. 模块是一个可以导入的Python 脚本文件…...

编程日记 2024/12/28 0:19:32

上海市住房和城乡建设委员会网站/自己可以做网站吗

微软在开源路上做了不少事情&#xff0c;如今又释出另一项目&#xff0c;那就是从有 Windows 开始就有的小程序──小算盘开源释出&#xff0c;放到 Github 上面了。微软小算盘原始码采用 MIT 授权释出&#xff0c;原始码中&#xff0c;还包括组建系统 (build system)、单元测试…...

编程日记 2024/12/27 22:49:28

网站建设 图片/百度一下网页版浏览器百度

ListView内item与Button共存的点击监听问题 2016-03-11 12:34 179人阅读 评论(0) 收藏 举报 分类&#xff1a; android&#xff08;14&#xff09; 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 最近写ListView&#xff0c;在其中的item中加入…...

编程日记 2024/12/27 19:20:55

网站建设创新/南昌seo排名收费

白话uni-app https://uniapp.dcloud.net.cn/vernacular.html# 主要内容提炼 &#xff1a; uni-app 是把 html 一些标签转换成了符合移动命名的一些标签&#xff0c;增加了一些移动特性的标签 div 改成 view span、font 改成 text a 改成 navigator img 改成 image ... scro…...

编程日记 2024/12/27 15:39:06

长沙建网站的公司一对一定制方案/百度推广开户费

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&…...

编程日记 2024/12/27 13:26:46

做设计网站/徐州seo企业

1. 安装 Xcode command line tools xcode-select --install 2. reset一下 sudo xcode-select --reset 3. 修改日期 ##修改创建日期&#xff1a;setfile -d mm/dd/yy hh:mm:ss filename ##修改修改日期&#xff1a;setfile -m mm/dd/yy hh:mm:ss filenamesetfile -d 1/1/20…...

编程日记 2024/12/27 9:30:09