21.3 CSS 背景属性
1. 背景颜色
background-color属性: 设置元素的背景颜色.
它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bc+tab background-color:#fff;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background color</title><style>div {height: 100px;}.box1 {background: red;}.box2 {background: rgb(100, 100, 100);}.box3 {background: rgba(100, 100, 100, d0.5);}.box4 {background: #AAAAAA;}.box5 {background: #666;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body>
</html>
2. 背景图片
background-image属性: 设置元素的背景图片.
可以使用该属性指定一个图片文件的URL作为元素的背景.注意事项: 如果图片的大小, 没有标签大, 那么会自动在水平和垂直方向平铺和填充.快捷键: bi+tab background-image:url("");
背景图片: 仅仅是一个装饰, 不会占用位置, 有定位属性可以控制图片位置.
插入图片: 会占用位置, 没有定位属性, 控制图片位置难, 搜索引擎能收录.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background image</title><style>div {height: 1000px;width: 1000px;background-image: url(image/img1.gif);}</style>
</head>
<body>
<div></div>
</body>
</html>
3. 背景图像重复方式
background-repeat属性: 用来控制背景图像的重复方式.
它可以设置在CSS中的背景属性(background或background-image)上.常用属性值:
- repeat: 默认值, 背景图像在水平和垂直方向上重复.
- repeat-x: 背景图像在水平方向上重复.
- repeat-y: 背景图像在垂直方向上重复.
- no-repeat: 背景图像不重复, 只出现一次.
- round: 背景图像在水平和垂直方向上拉伸或缩小, 直到填满整个容器.
- space: 背景图像在水平和垂直方向上复制以填满容器, 但图像之间的间隔保持相等.快捷键: bgr+tab background-repeat:;
应用场景: 为网页设置背景图片, 图片越大, 需要加载的时间越长, 通过平铺来降低图片的大小, 提示网页的访问速度(使用有规律的图片).找一张有规律, x, y轴平铺.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background repeat</title><style>div {height: 1080px;width: 1920px;}.box1 {background-image: url(image/img2.png);}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
4. 背景图片定位
background-position属性: 用于设置背景图像在容器内的位置.该属性可以采用以下方式进行设置:
* 1. 使用关键字或关键字组合:- left: 将背景图像向容器的左侧对齐.- center: 将背景图像在容器中水平和垂直居中.- right: 将背景图像向容器的右侧对齐.- top: 将背景图像向容器的顶部对齐.- bottom: 将背景图像向容器的底部对齐.- 关键字组合: 可以使用关键字组合(左或右, 上或下), 如'left top', 'right bottom'等, 将背景图像分别在水平和垂直方向上对齐.* 2. 使用像素, 百分比或其他单位的值:- px: 使用像素值来指定背景图像相对于容器边框的偏移位置.- %: 使用百分比值来指定背景图像相对于容器宽度或高度的偏移位置.- 其他单位: 可以使用其他有效的长度单位如: em, rem, vw, vh等.注意事项: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 图片会覆盖背景颜色.快捷键: bp+tab background-position:0 0;
4.1 关键字定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 1</title><style>div {height: 300px;width: 300px;background: #00ff19;}.box1 {background-image: url(image/柯南.jpg);background-repeat: no-repeat;background-position: top left; /* 垂直方向 上 水平方向 左 */}.box2 {background-image: url(image/小兰.jpg);background-repeat: no-repeat;background-position: bottom right; /* 垂直方向 下 水平方向 右 */}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>
4.2 像素定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 2</title><style>div {height: 300px;width: 300px;background: red;}.box1 {background-image: url(image/柯南.jpg);background-repeat: no-repeat;background-position: 100px 0;}.box2 {background-image: url(image/小兰.jpg);background-repeat: no-repeat;background-position: -50px -50px;}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>
4.3 练习
4.3.1 图片居中
假设图片大小为 96x96 像素, div大小为300x300像素.
要使图片在div中水平和垂直居中, 可以按照以下方式计算背景图像的background-position属性值.水平偏移量 = (div 宽度 - 图片宽度) / 2 = (300 - 96) / 2 = 102 像素
垂直偏移量 = (div 高度 - 图片高度) / 2 = (300 - 96) / 2 = 102 像素* 默认设置图标的左上角坐标.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 3</title><style>.box1 {width: 300px;height: 300px;background-color: aqua;background-image: url(image/柯南2.jpg);background-repeat: no-repeat; /* 不平铺 */background-position: 102px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
4.3.2 优先展示
优先展示: 网页始终将图片中间的重要信息给展示出来.
通常设置: background-position: center top;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 4</title><style>div {height: 160px;}.box {background-image: url(image/1024.gif);background-position: center top;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.3.3 图片拼接
将下面两张图片拼接在一起.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 5</title><style>div {width: 1400px;height: 900px;}.box1 {background-image: url(image/剑圣1.png);background-repeat: no-repeat;background-position: 61% top;}.box2 {background-image: url(image/剑圣2.png);}</style>
</head>
<body>
<div class="box2"><div class="box1"></div>
</div>
</body>
</html>
4.3.4 图片重叠
将下面两张图片重叠在一起.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 6</title><style>div {width: 1136px;height: 632px;}.box1 {background-image: url(image/鱼1.png);background-repeat: no-repeat;}.box2 {background-image: url(image/鱼2.png);background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>
5. 背景图片关联
background-attachment属性: 指定背景图像的滚动行为(背景图片与滚动条之间的关联方式).常用属性值:
- scroll: 背景图像会随着页面的滚动而滚动.
- fixed: 背景图像在页面滚动时固定不动, 保持在可视区域的固定位置.
- local: 背景图像会随着元素内容的滚动而滚动, 而不是整个页面的滚动.快捷键: ba+tab background-attachment:;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background attachment</title><style>.box1 {background-image: url(image/img2.png);background-repeat: no-repeat;background-attachment: fixed;}</style>
</head>
<body>
<div class="box1">x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>
</div>
</body>
</html>
6. 背景属性缩写
背景属性缩写格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意事项: background中可以省略任何一个属性值. 快捷键(可能失效): gb+ +tab: background: #fff url() 0 0 no-repeat;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background</title><style>div {width: 300px;height: 300px;}/*完整格式*/.box1 {background-color: aqua;background-image: url(image/太极.png);background-repeat: no-repeat;background-position: center;}/*缩写格式*/.box2 {background: red url(image/太极.png) no-repeat center;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
7. 背景图片大小
background-size属性: 定义背景图片的大小.常用属性值:
* 1. 具体像素值: 可以指定背景图片的宽度和高度.例如'background-size: 200px 300px;', 表示背景图片宽度为200像素, 高度为300像素.* 2. 百分比值: 可以根据容器元素的大小来调整背景图片的尺寸.例如'background-size: 50% auto;', 表示背景图片的宽度为容器宽度的50%, 高度根据图片原始比例自动计算.* 3. 关键词值:- auto: 背景图片的尺寸保持原始比例, 并根据容器大小进行自动调整.- cover: 等比例缩放背景图片, 以完全覆盖容器, 可能会有部分图片超出容器范围.- contain: 等比例缩放背景图片, 以完全适应容器, 可能会有背景区域出现空白.例如,' background-size: cover;': 表示将背景图片等比例缩放以完全覆盖容器, 可能会裁剪部分图片.而'background-size: contain;': 表示将背景图片等比例缩放以完全适应容器, 可能会在容器内留有空白区域. 请注意, 'background-size'属性只对具有背景图片的元素起作用, 而不会影响其他元素.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background size</title><style>body {background-image: url(image/太极.png);/* 不缩放 */background-size: 300px 300px;/* 不平铺 */background-repeat: no-repeat;}</style></head>
<body>
</body>
</html>
固定背景图片的大小, 不随页面缩放.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background attachment</title><style>body {/* 缩放页面不影响背景图片 */background-image: url(image/壁纸.webp);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}</style>
</head>
<body></body>
</html>
8. CSS精灵图
CSS精灵图(CSS Sprite): 是一种将多个图像合并到单个图像文件中的技术.
通过使用CSS中的背景定位和尺寸控制, 可以只显示图像文件中的特定部分, 从而实现在网页中展示多个图像.
使用CSS精灵图的好处包括减少HTTP请求次数, 提高页面加载速度, 以及更好的用户体验.CSS精灵图需要配合背景图片和背景定位来使用.
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS Sprite</title><style>div {width: 140px;height: 140px;display: inline-block; /* 设置为行内块级标签 */background-image: url("https://s2.loli.net/2022/02/16/yE1xHUWdnovFZYT.jpg");}.box1 {background-position: -1041px -1443px;}.box2 {background-position: -1445px -1442px}.box3 {background-position: -1832px -1644px;}.box4 {background-position: -237px -245px;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
相关文章：
21.3 CSS 背景属性
1. 背景颜色 background-color属性: 设置元素的背景颜色. 它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bctab background-color:#fff;<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...
Ansible 常用命令50条
以下是 Ansible 常用的 50 条命令： ansible --version: 查看 Ansible 版本信息。ansible all -m ping: 检查所有主机的连通性。ansible-playbook playbook.yml: 运行指定的 Ansible Playbook 文件。ansible-doc module_name: 查看指定模块的帮助文档。ansible-conf…...
ceph源码阅读 erasure-code
1、ceph纠删码 纠删码(Erasure Code)是比较流行的数据冗余的存储方法，将原始数据分成k个数据块(data chunk)，通过k个数据块计算出m个校验块(coding chunk)。把nkm个数据块保存在不同的节点，通过n中的任意k个块还原出原始数据。EC包含编码和解…...
C++ 之 命名空间
namespace_百度百科，有示例...
MyBatis关系映射
文章目录 前言一、一对一映射1.1 创建实体1.2 xml配置 二、一对多映射2.1 创建实体2.2 resultMap配置2.3 测试 三、 多对多映射3.1 创建实体3.2 resultMap配置3.3 测试 前言 MyBatis是一个Java持久化框架，它提供了一种将数据库表和Java对象之间进行关系映射的方式。…...
DVWA失效的访问控制
失效的访问控制，可以认为是系统对一些功能进行了访问或权限限制，但因为种种原因，限制并没有生效，造成失效的访问控制漏洞,比如越权等 这里以DVWA为例，先访问低难度的命令执行并抓包 删除cookie，并在请求头…...
docker 笔记2 Docker镜像和数据卷
参考： 1.镜像是什么？（面试题） 是一种轻量级、可执行的独立软件包，它包含运行某个软件所需的所有内容，我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文…...
java springboot 时间格式序列化 UTC8
背景 我们在项目中使用序列化和反序列化组件中，默认一般采用Jackson，如果遇到特殊配置，我们该怎么配置呢，大致有如下两种方式：采用配置文件【application.yml】和代码配置 配置文件 比如添加jackson节点 spring:jac…...
攻防世界-Get-the-key.txt
原题 解题思路 notepad看到，这应该是一个压缩包，解压。 但是解压的时候提示格式不对，不是zip，rar可以。解压出来有一个key.txt，打开就行。...
MyBatisPlus之DQL编程控制
🐌个人主页： 🐌 叶落闲庭 💨我的专栏：💨 c语言 数据结构 javaEE 操作系统 石可破也，而不可夺坚；丹可磨也，而不可夺赤。 MyBatisPlus之DQL编程控制 一、 条件查询方式&…...
本地使用GFPGAN进行图像人脸修复
人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验 首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境 根据README文件部署好环境，额外还需要： cd GFPGAN-1.3.8 pyt…...
Linux--进程概念
1.什么是程序？什么是进程？有什么区别？ 程序：是静态的概念，gcc xxx.c -o pro 磁盘中生成的pro文件，叫做程序。 进程：是程序的一种与运行活动，通俗的意思是程序跑起来了，系…...
dex2oat编译模式、触发场景、命令强制执行
dex2oat简单理解就是把delvik虚拟机的可执行文件dex转化成AndroidRuntime虚拟机的可执行文件oat。 Android T版本由PKMS下发命令、native层进程installd负责具体执行dex2oat操作。installd回去调用dex2oat64完成编译工作，可以将dex2oat64理解成一个程序。源码路径&…...
深度学习 | TCN时间卷积神经网络模型答疑
深度学习 | TCN时间卷积神经网络模型答疑 目录 深度学习 | TCN时间卷积神经网络模型答疑问题汇总问题回答参考资料问题汇总 1.使用 TCN 进行序列建模有哪些优势？ 2.TCN 的特征？ 问题回答 1.使用 TCN 进行序列建模具备以下优势： 并行性。与 RNN 中后继时间步长的预测必须等待…...
Linux之修改服务端口号
本次演示以SSH服务为例，SSH默认监听端口是22,先保留了22端口，所以我们要进入ssh的配置文件添加新端口并注释或删掉原有端口。 1、使用vi编辑器修改文件 sshd_config,路径是/etc/ssh/sshd_config,找到“#Port 22”,添加新的端口号10086。 2、如果你关闭了…...
LeetCode笔记：Weekly Contest 361
LeetCode笔记：Weekly Contest 361 0. 吐槽1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现 比赛链接：https://leetcode.com/contest/weekly-contest-361 0. …...
Springboot快速搭建Web API项目
内容概述 SpringBoot最常见得用途就是web api项目。 本文介绍使用自动配置功能，通过最简洁的pom依赖，快速搭建一个示例项目。 实现的功能为：接收http请求并返回json格式的数据。 一、配置pom.xml依赖 1.引入springweb依赖 <dependenc…...
数据结构day06（单向循环链表、双向链表）
双向链表的练习代码 head.h #ifndef __HEAD_H__ #define __HEAD_H__ #include <stdio.h> #include <stdlib.h> #include <string.h> typedef int database; typedef struct double_link_list{union{database data;int len;};struct double_link_list* pre;…...
zabbix -- 新建主机
目录 一、新建主机 二、新建监控项 IP主机192.168.136.55zabbix控制端/服务端192.168.136.56zabbix被控端/客户端 一、新建主机 主机参数 名称、群组（每台主机必须属于某个主机组内）、ip、端口 创建完成，如果你的ZBX为灰色，代…...
=＞符号含义
>主要有两方面的作用，一个限制属性状态，另一个简化匿名委托和Lambda 用法一：定义只读属性 public class ManPeople { public string Sex > "男";public string Name { get; set; }}public class WomanPeople { publi…...
Docker+Jenkins(blueocean)+Gitee构建CICD流水线实战
一、配置JDK 1.1 编辑profile文件 vim /etc/profile export JAVA_HOME/home/jdk/jdk1.8.0_301 export JRE_HOME$JAVA_HOME/jre export CLASSPATH.:$CLASSPATH:$JAVA_HOME/lib:$JRE_HOME/lib export PATH$PATH:$JAVA_HOME/bin:$JRE_HOME/bin 1.2 使配置生效 source /etc/pro…...
Redis快速入门
文章目录 0. Redis介绍1. Centos下Redis安装2. redis.conf配置文件介绍3. redis相关命令4.redis中发布订阅和事务4.1 发布订阅（Pub/Sub）4.2 事务 5. redis封装系统服务6. 问题与解决6.1 启动Redis报错：Could not create Server TCP listening…...
EasyExcel 修改导出的文件属性
EasyExcel 修改导出的文件属性 导出的文件有多种属性,本文只针对sheet名称进行举例 需要自定义拦截器 ExcelWriter excelWriter EasyExcel.write(fileName).withTemplate(stream).registerWriteHandler(new TemplateSheetStrategyHandler()).build()registerWriteHandler (n…...
电子班牌云平台系统——智慧校园管理工具，多媒体信息发布、走班排课、家校互通、物联控制、教务管理、考勤管理、素质评价、日常办公
电子班牌云平台源码，saas模式微服务架构 电子班牌是一款智慧校园管理工具，也是校园多媒体展示平台。智慧班牌融合了多媒体信息发布、走班排课、家校互通、物联控制、教务管理、考勤管理、素质评价、日常办公等一系列应用，是校园管理的现代化手…...
docker-compose 部署 Seata整合nacos,Postgresql 为DB存储
docker-compose 部署 Seata整合nacos,Postgresql 为DB存储 环境 详情环境可参考 https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E 我这里 <spring.cloud.alibaba-version>2021.1</spring.cloud.alibaba-version>所…...
three.js 场景中如何彻底删除模型和性能优化
three.js 场景中如何彻底删除模型和性能优化 删除外部模型 在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤： 从场景中移除模型 你可以使用 scene.remove(model) 或者 scene.remove(model.children[0]) 将模型从场景中移除。如果…...
Bridge Champ举办人机对战赛：NFT游戏与传统竞技共生发展编织新格局
概要 现在,NFT与体育竞技正日益紧密地联系在一起。一些体育项目开始推出与赛事或球队相关的NFT,同时也有部分NFT游戏开始举办电子竞技赛事。这种共生发展正在改变体育竞技的生态。 笔者采访了桥牌冠军项目相关负责人,探讨NFT游戏与传统体育竞技的融合潜力。桥牌冠军近期成功举…...
Visual Studio软件_MSC_VER值（MSVC编译器版本）的获取方法
本文介绍查看Visual Studio软件_MSC_VER值的方法。 _MSC_VER是微软公司推出的C/C 编译器——MSVC编译器的一个内置宏，其值表示当前Visual Studio软件中MSVC编译器的具体版本。不同的Visual Studio软件版本对应着不同的MSVC编译器版本——无论是不同发布年份的版本&…...
02-Linux-IO多路复用之select、poll和epoll详解
前言： 在linux系统中，实际上所有的 I/O 设备都被抽象为了文件这个概念，一切皆文件，磁盘、网络数据、终端，甚至进程间通信工具管道 pipe 等都被当做文件对待。 在了解多路复用 select、poll、epoll 实现之前ÿ…...
echo、print_r、print、var_dump 、die
die()和exit()函数都有终止线程的作用 是php断点调试需要使用的最主要的函数 die()函数一般与“or”一并使用，写作“or die()” var_dump()和print_r() var_dump() 显示关于一个或多个表达式的结构信息，包括表达式的类型与值。数组将递归展开值&#…...