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

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

news 2026/5/14 8:17:37

文章目录

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

强化学习在推测执行漏洞挖掘中的应用与实践

1. 推测执行漏洞与安全挑战现代处理器中的推测执行技术通过预测分支路径提前执行指令&#xff0c;大幅提升了指令级并行性。当处理器遇到条件分支时&#xff0c;它会根据历史记录预测分支走向&#xff0c;并提前执行预测路径上的指令。如果预测正确&#xff0c;可以节省约10-15…...

编程新知 2026/5/14 8:08:44

LinkedIn Liger Kernel：移动设备内核定制与性能优化实战

1. 项目概述&#xff1a;一个面向移动设备的开源内核探索如果你在移动设备开发、嵌入式系统或者内核研究的圈子里待过一段时间&#xff0c;大概率听说过或者接触过“Liger Kernel”这个名字。它不是一个商业产品&#xff0c;而是一个在GitHub上由LinkedIn开源并维护的Android内…...

编程新知 2026/5/14 7:56:28

MySQL性能优化：慢查询分析与索引设计艺术

MySQL性能优化&#xff1a;慢查询分析与索引设计艺术 引言 MySQL是世界上最流行的开源关系型数据库之一&#xff0c;但再强大的数据库在不当使用下也会出现性能问题。慢查询是数据库性能的头号杀手&#xff0c;而正确的索引设计则是解决慢查询的关键。本文将深入探讨MySQL慢查询…...

编程新知 2026/5/14 6:01:50

S32K3 FlexCAN实战：从MCAL配置到DMA接收，手把手教你避开那些手册里没写的坑

S32K3 FlexCAN深度实战&#xff1a;从寄存器配置到DMA优化全链路解析 在车载电子架构快速迭代的今天&#xff0c;S32K3系列MCU凭借其强大的FlexCAN模块成为汽车电子开发者的首选。但官方文档往往只勾勒出理想状态下的功能框架&#xff0c;当工程师真正着手实现CAN FD通信时&…...

编程新知 2026/5/14 5:54:55

国产多模态大模型“刘知远”：技术原理、实战应用与未来展望

国产多模态大模型“刘知远”&#xff1a;技术原理、实战应用与未来展望 引言 在人工智能浪潮中&#xff0c;多模态大模型正成为推动AGI&#xff08;通用人工智能&#xff09;发展的关键引擎。当全球目光聚焦于GPT-4、DALL-E等明星模型时&#xff0c;国产力量也在悄然崛起。其中…...

编程新知 2026/5/14 5:26:15

图灵完备8051 第三天 累加器A和寄存器B

如果EN_B1&#xff0c;则写入新数据&#xff0c;否则保持原状。EN_B_OUT1&#xff0c;则输出&#xff0c;否则高阻态A也一样...

编程新知 2026/5/14 3:08:17

近屿AI学：产品经理转AI开发，开局20K

许知言&#xff08;化名&#xff09;做过B端产品经理&#xff0c;也有悉尼大学硕士背景。听起来&#xff0c;她本可以继续走产品路线。但AI开始快速改变产品形态后&#xff0c;她心里一直有个问题&#xff1a;如果未来的产品经理不懂AI开发&#xff0c;会不会很快被甩开&#x…...

编程新知 2026/5/14 2:38:41

Perplexity检索JAMA时总漏掉关键RCT？用这4类结构化查询指令，召回率提升至98.6%（附可复用Prompt库）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Perplexity检索JAMA文章的核心挑战与现状分析 Perplexity 作为基于大语言模型的实时网络增强型问答引擎&#xff0c;在检索高影响力医学文献&#xff08;如《Journal of the American Medical Associat…...

编程新知 2026/5/14 0:36:59

改进人工势场多无人机三维航迹规划【附代码】

✨ 长期致力于航迹规划、多无人机、目标分配、人工势场算法、三维空间研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;多目标任务分配与人工势场基础&…...

编程新知 2026/5/13 22:49:41

PowerToys深度解析：Windows生产力工具集的高级配置与性能调优

PowerToys深度解析&#xff1a;Windows生产力工具集的高级配置与性能调优 【免费下载链接】PowerToys Microsoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows 项目地址: https://gitcode.com/GitHub_Trending/po/Po…...

编程新知 2026/5/13 22:12:33