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

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

news 2026/2/10 18:09:07

文章目录

  • 一、背景颜色
    • 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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/10 11:45:58

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2026/2/3 8:20:06

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33