21.3 CSS 背景属性

image-20230901120028773

1. 背景颜色

background-color属性: 设置元素的背景颜色.
它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bc+tab background-color:#fff;

2023-08-22_00032

<!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>

2023-08-22_00032

image-20230822202154103

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>

image-20230822203145007

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>

image-20230822203903030

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 关键字定位

kn

ml

<!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>

image-20230822205608893

4.2 像素定位

image-20211020191231310

<!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>

image-20230822210103328

4.3 练习

4.3.1 图片居中

image-20220216190259843

假设图片大小为 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>

image-20230822210543729

4.3.2 优先展示

优先展示: 网页始终将图片中间的重要信息给展示出来.
通常设置: background-position: center top;

csdn

<!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>

2023-08-22_00040

4.3.3 图片拼接

将下面两张图片拼接在一起.

j2

j1

<!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>

image-20230822215900487

4.3.4 图片重叠

将下面两张图片重叠在一起.

鱼1

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!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>

image-20230822220644155

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>

GIF 2023-8-22 22-11-57

6. 背景属性缩写

背景属性缩写格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意事项: background中可以省略任何一个属性值. 快捷键(可能失效): gb+ +tab: background: #fff url() 0 0 no-repeat;

yy

<!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>

image-20230822221601857

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>

image-20230901111547954

固定背景图片的大小, 不随页面缩放.

<!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>

GIF 2023-9-1 11-30-59

8. CSS精灵图

CSS精灵图(CSS Sprite): 是一种将多个图像合并到单个图像文件中的技术.
通过使用CSS中的背景定位和尺寸控制, 可以只显示图像文件中的特定部分, 从而实现在网页中展示多个图像.
使用CSS精灵图的好处包括减少HTTP请求次数, 提高页面加载速度, 以及更好的用户体验.CSS精灵图需要配合背景图片和背景定位来使用.
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

jlt2

<!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>

image-20230901113243028

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/62137.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Flowable7 设计器

Flowable7 设计器

1、flowable7 已经在主版本上移除了Flowable UI相关的包&#xff0c;包含bpm-json相关的所有包和流程设计器相关前端文件。 2、flowable7 版本目前只保留了xml运行相关的包&#xff0c;ui modeler已经移除 3、目前官方给的回复是只能在 flowable 云产品上使用设计器&#xff…
阅读更多...
Educational Codeforces Round 154 (Rated for Div. 2)

Educational Codeforces Round 154 (Rated for Div. 2)

Educational Codeforces Round 154 (Rated for Div. 2) A. Prime Deletion 思路&#xff1a; 因为1到9每个数字都有&#xff0c;所以随便判断也质素即可 代码 #include<bits/stdc.h> using namespace std; #define int long long #define rep(i,a,n) for(int ia;i<…
阅读更多...
HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统

HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统

适用型号&#xff1a;15s-du1007tx、15s-du1008tx、15s-du1009tx、15s-du1010tx、15s-du1011tx、15s-du1012tx、15s-du1013tx 自带所有驱动、出厂主题壁纸LOGO、Office办公软件、惠普电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO 文件大…
阅读更多...
thinkphp6 入门（3）--获取GET、POST请求的参数值

thinkphp6 入门（3）--获取GET、POST请求的参数值

一、Request对象 thinkphp提供了Request对象&#xff0c;其可以 支持对全局输入变量的检测、获取和安全过滤 支持获取包括$_GET、$_POST、$_REQUEST、$_SERVER、$_SESSION、$_COOKIE、$_ENV等系统变量&#xff0c;以及文件上传信息 具体参考&#xff1a;https://www.kanclou…
阅读更多...
uniapp小程序位置信息配置

uniapp小程序位置信息配置

uniapp 小程序获取当前位置信息报错 报错信息&#xff1a; getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json 需要在manifest.json配置文件中进行配置&#xff1a;
阅读更多...
Tomcat安装及配置教程-Windows和Linux

Tomcat安装及配置教程-Windows和Linux

本文主要介绍Windows版本Tomcat部署的详细步骤和列出Linux部署的简要细节命令,其中Windows从一到七,Linux用第八个标题讲述 一,安装 1,打开官网,https://tomcat.apache.org/,选择Tomcat 8.5.93版本,点击Download,根据系统版本选择压缩包 2,下载完毕,将压缩包解压,将所有文件放…
阅读更多...
泛型的学习

泛型的学习

泛型深入 泛型&#xff1a;可以在编译阶段约束操作的数据类型&#xff0c;并进行检查 泛型的格式&#xff1a;<数据类型> 注意&#xff1a;泛型只能支持引用数据类型 //没有泛型的时候&#xff0c;集合如何存储数据//如果我们没有给集合指定类型&#xff0c;默认认为…
阅读更多...
MyBatis——MyBatis插件原理

MyBatis——MyBatis插件原理

摘要 本博文主要介绍MyBatis插件机原理&#xff0c;帮助大家更好的理解和学习MyBatis。 一、插件机制概述 MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用。默认情况下&#xff0c;MyBatis允许使用插件来拦截的方法调用包括&#xff1a; Executor (update, que…
阅读更多...
轻松管理不同类型的文件，高效将文件按类型进行移动归类

轻松管理不同类型的文件，高效将文件按类型进行移动归类

如果你经常需要处理不同类型的文件素材&#xff0c;例如图片、音频、视频等&#xff0c;那么你一定知道这是一项繁琐的任务。为了帮助你快速整理这些文件&#xff0c;我们推出了一款强大的文件管理工具&#xff0c;让你能够轻松地将不同类型的文件素材归类到不同文件夹里单独保…
阅读更多...
Qt应用开发(基础篇)——文件选择对话框 QFileDialog

Qt应用开发(基础篇)——文件选择对话框 QFileDialog

一、前言 QFileDialog类继承于QDialog&#xff0c;提供了一个允许用户选择文件或目录的对话框。 对话框窗口 QDialog QFileDialog文件选择对话框允许用户在当前文件系统中选择一个或者多个文件或者文件路径&#xff0c;使用静态函数创建是很简便的方式&#xff0c;比如&#xf…
阅读更多...
【以太网硬件二十】USXGMII是什么？

【以太网硬件二十】USXGMII是什么？

&#x1f449;个人主页&#xff1a; highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 目录 回顾 概览 功能框图描述 XGMII接口和数据包 XGMII接口信号 XGMII数据流 …
阅读更多...
pdf怎么转换成word？

pdf怎么转换成word？

随着数字化时代的到来&#xff0c;PDF(Portable Document Format)已成为最受欢迎的文档格式之一&#xff0c;因其在各种设备上的可视性和稳定性而备受推崇。然而在某些情况下&#xff0c;将PDF转换为Word文档可能是必要的&#xff0c;这使得编辑、修改和重新格式化文本变得更加…
阅读更多...
龙蜥开发者说 ：戮力同心，砥砺前行，为国产操作系统发展出一份力 | 第 23 期

龙蜥开发者说 ：戮力同心，砥砺前行，为国产操作系统发展出一份力 | 第 23 期

「龙蜥开发者说」第 23 期来了&#xff01;开发者与开源社区相辅相成&#xff0c;相互成就&#xff0c;这些个人在龙蜥社区的使用心得、实践总结和技术成长经历都是宝贵的&#xff0c;我们希望在这里让更多人看见技术的力量。本期故事&#xff0c;我们邀请了龙蜥社区开发者李崇…
阅读更多...
【DEVOPS】Jenkins使用问题 - 控制台输出乱码

【DEVOPS】Jenkins使用问题 - 控制台输出乱码

0. 目录 1. 问题描述2. 解决方案3. 最终效果4. 总结 1. 问题描述 部门内部对于Jenkins的使用采取的是Master Slave Work Node的方式&#xff0c;即作为Master节点的Jenkins只负责任务调度&#xff0c;具体的操作由对应的Slave Work Node去执行。 最近团队成员反馈一个问题&a…
阅读更多...
cs231n assignmen3 Extra Credit: Image Captioning with LSTMs

cs231n assignmen3 Extra Credit: Image Captioning with LSTMs

文章目录 嫌墨迹直接看代码Extra Credit: Image Captioning with LSTMslstm_step_forward题面解析代码输出 lstm_step_backward题面解析代码输出 lstm_forward题面解析代码输出 lstm_backward题面解析代码输出 CaptioningRNN.loss解析代码输出 最后输出结语 嫌墨迹直接看代码 …
阅读更多...
【Dart】学习使用（二）：基本类型

【Dart】学习使用（二）：基本类型

前言 基本类型是语言的基础。 Dart 语言支持以下基础类型&#xff1a;Numbers(int、double)&#xff0c; 整形Strings(String), 字符串Booleans(bool) , 布尔型Records((value1,value2)) 记录Lists(List ) 数组Sets(Set) 集合Maps(Map) 映射Runes(Runes,通常由 characters AP…
阅读更多...
【STM32】学习笔记(串口通信)-江科大

【STM32】学习笔记(串口通信)-江科大

串口通信 通信接口硬件电路电平标准USARTUSART框图 通信接口 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信 单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#…
阅读更多...
2023京东酒类市场数据分析（京东数据开放平台）

2023京东酒类市场数据分析（京东数据开放平台）

根据鲸参谋平台的数据统计&#xff0c;今年7月份京东平台酒类环比集体下滑&#xff0c;接下来我们一起来看白酒、啤酒、葡萄酒的详情数据。 首先来看白酒市场。 鲸参谋数据显示&#xff0c;7月份京东平台白酒的销量为210万&#xff0c;环比下滑约49%&#xff1b;销售额将近19…
阅读更多...
mfc140u.dll丢失如何修复？解析mfc140u.dll是什么文件跟修复方法分享

mfc140u.dll丢失如何修复？解析mfc140u.dll是什么文件跟修复方法分享

大家好&#xff01;今天&#xff0c;我将和大家分享一下关于计算机中mfc140u.dll丢失的6种解决方法。希望我的分享能对大家在计算机使用过程中遇到问题时提供一些帮助。 首先&#xff0c;我想请大家了解一下什么是mfc140u.dll文件。mfc140u.dll是一个动态链接库文件&#xff0…
阅读更多...
Unity碰撞检测（3D和2D）

Unity碰撞检测（3D和2D）

Unity碰撞检测3D和2D 前言准备材料3D2D 代码3D使用OnCollisionEnter()进行碰撞Collider状态代码 使用OnTriggerEnter()进行碰撞Collider状态代码 2D使用OnCollisionEnter2D()进行碰撞Collider2D状态代码 使用OnTriggerEnter2D()进行碰撞Collider2D状态代码 区别3D代码OnCollisi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023