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

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

news 2026/2/8 12:39:52

文章目录

  • 一、背景颜色
    • 1、语法说明
    • 2、代码示例
  • 二、背景图片
    • 1、语法说明
    • 2、代码示例
  • 三、背景平铺





一、背景颜色



1、语法说明


CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;

background-color:颜色值;

background-color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 :

  • 预定义颜色 : 直接使用 颜色的英文名称 , blue , red , green ;
  • 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
  • RGB 代码颜色 :
    • 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
    • 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

2、代码示例


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景颜色</title><base target="_blank"/><style>/* 设置背景颜色 */.background {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="background">背景颜色测试</div>
</body>
</html>

展示效果 :

在这里插入图片描述





二、背景图片



1、语法说明


CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ;

background-image: url(相对路径);
  • 在 url() 中设置相对链接
  • url() 中的链接没有双引号

2、代码示例


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景图片</title><base target="_blank"/><style>/* 设置背景图片 */.background {width: 200px;height: 200px;color: white;/* 背景图片设置 1. 在 url() 中设置相对链接2. url() 中的链接没有双引号*/background-image: url(images/image.jpg);}</style>
</head>
<body><div class="background">背景图片测试</div>
</body>
</html>

展示效果 :
在这里插入图片描述





三、背景平铺


上面示例中 , 使用的图片像素是 200x200 像素 , 设置到 200x200 的盒子中 , 正好充满整个背景 ;

但是如果设置到 400x400 像素的盒子中 , 就会出现如下样式 , 背景会重叠展示多个 ;

在这里插入图片描述

通过设置 background-repeat 属性 , 可以设置平铺效果 ;

  • 默认平铺样式 : background-repeat: repeat; , 背景在 X 和 Y 轴方向上平铺 ;

在这里插入图片描述

  • 背景不平铺 : background-repeat: no-repeat; , 背景放在盒子左上角 ;
    在这里插入图片描述

  • 横向平铺 : background-repeat: repeat-x; , 背景在 X 轴方向上平铺 ;
    在这里插入图片描述

  • 纵向平铺 : background-repeat: repeat-y; , 背景在 Y 轴方向上平铺 ;

在这里插入图片描述

相关文章：

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

文章目录一、背景颜色1、语法说明2、代码示例二、背景图片1、语法说明2、代码示例三、背景平铺一、背景颜色 1、语法说明 CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ; background-color:颜色值;background-color 属性 可以 定义 文本颜色 , 其颜色值有三种…...

编程日记 2023/3/10 7:21:31

uniCloud基础使用

获取openID云函数use strict; exports.main async (event, context) > {//event为客户端上传的参数console.log(event : , event)// jscode2session 微信小程序登录接口&#xff0c;获取openidconst {code} event;// 云函数中如需要请求其他http服务&#xff0c;则使用uni…...

编程日记 2023/3/10 7:20:29

5、Elasticsearch优化

一、Elasticsearch集群配置 1、硬件选择 Elasticsearch的基础是 Lucene &#xff0c;所有的索引和文档数据是存储在本地的磁盘中&#xff0c; 具体的路径可在 ES 的配置文件 ../config/elasticsearch.yml 中配置&#xff0c;如下&#xff1a;磁盘在现代服务器上通常都是瓶颈。…...

编程日记 2023/3/10 7:19:23

地质灾害防治单位资质

地质灾害危险性评估&#xff0c;是指在地质灾害易发区进行工程建设或者编制地质灾害易发区内的国土空间规划时&#xff0c;对建设工程或者规划区遭受山体崩塌、滑坡、泥石流、地面塌陷、地裂缝、地面沉降等地质灾害的可能性和建设工程引发地质灾害的可能性作出评估&#xff0c;…...

编程日记 2023/3/10 7:18:16

打怪升级之发送单个UDP包升级版

目标 1.message的输入由edit_control进行&#xff0c;需要捕获输入。 2.用户的主机地址和发送地址不一样&#xff0c;需要分别设置并绑定。 设计RC外观 必备组件&#xff1a;主机IP与端口&#xff0c;从机IP与端口&#xff0c;消息框&#xff0c;发送&#xff0c;连接按钮。…...

编程日记 2023/3/10 7:17:11

MyBatis开发

MyBatis开发入门搭建MyBatis框架开发环境在自己建的的项目建立个lib文件然后导入包3.两个jar包部署到项目中和为项目添加测试类库4.配置数据库mybatis-config.xml里面的配置&#xff1a;<?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE config…...

编程日记 2023/3/10 7:16:08

excel 数据查询，几个模式化公式请收好

1、一对多查询 所谓一对多&#xff0c;就是符合某个指定条件的有多个结果&#xff0c;要把这些结果都提取出来。 如下图所示&#xff0c;希望根据F2单元格中指定的部门&#xff0c;提取出左侧列表中“生产部”的所有人员姓名。 Excel 2019及以下版本&#xff1a;在H2单元格输…...

编程日记 2023/3/10 7:15:02

Prometheus MySQL 性能监控

一、 介绍 Prometheus 是一种开源的监控系统和时序数据库&#xff0c;旨在收集和处理大量数据并提供可视化、监控警报等功能。它支持多种语言、多种部署方式&#xff0c;并且非常灵活&#xff0c;而且社区支持非常活跃&#xff0c;为用户提供了很多优秀的解决方案。 MySQL 是一…...

编程日记 2023/3/10 7:13:55

刷题记录:牛客NC24261[USACO 2019 Feb G]Cow Land

传送门:牛客 题目描述 Cow Land 总共有 NNN 个不同的景点&#xff08; 2≤N≤1052 \leq N \leq 10^52≤N≤105 &#xff09;。 一共有 n−1n-1n−1 条道路连接任意两个景点&#xff0c;这意味着任意两个景点间只有一条简单路径。 每个景点 iii 都有一个享受值 eie_iei​ &…...

编程日记 2023/3/10 7:12:52

MYSQL开发误区

一、表、列、索引设计误区 1、现象&#xff1a;在线业务系统出现了三张表以上的关联查询 建议&#xff1a;说明业务逻辑在表设计上的实现不合理&#xff0c;需要进行表结构调整&#xff0c;或进行列的冗余&#xff0c;或进行业务改造。 2、现象&#xff1a;大表拆成多张小表之…...

编程日记 2023/3/10 7:11:47

k8s学习之路 | k8s 工作负载 DaemonSet

文章目录1. DaemonSet 基础1.1 什么是 DS1.2 DS 的典型用法1.3 如何编写 DS 资源1.4 DS 示例文件1.5 DS Pod 是如何被调度的1.6 更新 DS1.7 DS 替代方案1.8 DS 工作负载字段描述2. DaemonSet 的使用2.1 每个节点运行一个2.2 DS 更新策略2.3 滚动更新2.4 OnDelete 更新2.6 更新回…...

编程日记 2023/3/10 7:10:42

Javaweb MVC模式和三层架构

MVC 模式和三层架构是一些理论的知识&#xff0c;将来我们使用了它们进行代码开发会让我们代码维护性和扩展性更好。 7.1 MVC模式 MVC 是一种分层开发的模式&#xff0c;其中&#xff1a; M&#xff1a;Model&#xff0c;业务模型&#xff0c;处理业务 V&#xff1a;View&am…...

编程日记 2023/3/10 7:09:38

综合考虑，在客户端程序中嵌入网页程序，首选CefSharp。

综合考虑&#xff0c;在客户端程序中嵌入网页程序&#xff0c;首选CefSharp。 CefSharp 是一种将全功能符合标准的 Web 浏览器嵌入 C# 或 VB.NET 应用程序的简单方法。 https://www.jianshu.com/p/3f50cc747606 WinForm嵌入Web网页的解决方案 Microsoft Edge WebView2诞生较晚…...

编程日记 2023/3/10 7:08:30

【Java基础 下】 030 -- 网络编程

目录 一、什么是网络编程 1、常见的软件架构&#xff08;CS & BS&#xff09; ①、BS架构的优缺点 ②、CS架构的优缺点 2、小结 二、网络编程三要素 1、IP ①、IPv4 ②、IPv6 ③、小结 ④、IPv4的一些细节 ⑤、InetAddress的使用 2、端口号 3、协议 ①、TCP & UDP 三、…...

编程日记 2023/3/10 7:07:28

2021牛客OI赛前集训营-提高组（第三场） T3打拳

2021牛客OI赛前集训营-提高组&#xff08;第三场&#xff09; 题目大意 有2n2^n2n个选手参加拳击比赛&#xff0c;每个人都有一个实力&#xff0c;所有选手的实力用一个111到2n2^n2n的排列表示。 淘汰赛的规则是&#xff1a;每次相邻的两个选手进行比赛&#xff0c;实力值大…...

编程日记 2023/3/10 7:06:24

C++面向对象编程之四：成员变量和成员函数分开存储、this指针、const修饰成员和对象

在C中&#xff0c;成员变量和成员函数是分开存储的&#xff0c;只有非静态成员变量才存储在类中或类的对象上。通过该类创建的所有对象都共享同一个函数#include <iostream> using namespace std;class Monster {public://成员函数不占对象空间&#xff0c;所有对象共享同…...

编程日记 2023/3/10 7:05:18

卷积神经网络（CNN）基础知识

文章目录CNN的组成层卷积层卷积运算卷积的变种分组卷积转置卷积空洞卷积可变形卷积卷积层的输出尺寸和参数量CNN的组成层 在卷积神经⽹络中&#xff0c;⼀般包含5种类型的⽹络层次结构&#xff1a;输入层、卷积层、激活层、池化层和输出层。 输入层&#xff08;input layer&a…...

编程日记 2023/3/10 7:04:08

opencv+python 常见图像预处理

import os import cv2 import numpy as np import pandas as pd from PIL import Image import matplotlib.pylab as plt """图像预处理"""#缩放 #灰度化 #二值化-otsu,自定义&#xff0c;自适应 #均值滤波 #中值滤波 #自定义滤波 #高斯/双倍滤波…...

编程日记 2023/3/10 7:03:06

如何实现一个单例模式

目录 前言 1.饿汉式 2.懒汉式 3.双重检测 4.静态内部类 5.枚举 总结&#xff1a; 前言 单例模式是我们日常开发过程中&#xff0c;遇到的最多的一种设计模式。通过这篇文章主要分享是实现单例的几种实现方式。 1.饿汉式 饿汉式的实现方式比较简单。在类加载的时候&#…...

编程日记 2023/3/10 7:02:01

传输线的物理基础（四）：传输线的驱动和返回路径

驱动一条传输线对于将信号发射到传输线的高速驱动器&#xff0c;传输线在传输时间内的输入阻抗将表现得像一个电阻&#xff0c;相当于线路的特性阻抗。鉴于此等效电路模型&#xff0c;我们可以构建驱动器和传输线的电路&#xff0c;并计算发射到传输线中的电压。等效电路如下图…...

编程日记 2023/3/10 7:00:59

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57