CSS 背景效果

目录

一、CSS背景属性

二、准备工作

三、background-color

四、background-image

五、background-repeat

六、background-position

七、background-size

八、background-attachment

九、background-clip

十、background-origin

十一、background

一、CSS背景属性

在CSS中，一般使用下面这些常用的背景属性，来定义HTML元素的背景；

序号属性说明
1

background-color

设置元素的背景颜色；
2background-image设置元素的背景图像；
3

background-repeat

设置元素背景图像的重复效果；
4

background-position

设置元素背景图像的起始位置；
5

background-size

设置元素背景图像的大小；CSS3 属性；
6

background-attachment

设置元素背景图像是否固定；
7background-clip设置元素背景的绘制区域；CSS3 属性；
8background-origin设置元素背景图片的定位区域；CSS3 属性；
9

background

简写属性；

下面通过对每个属性及其属性值的详细介绍和具体示例，说明上述背景属性的使用方法和实现效果；

二、准备工作

准备一个简易的HTML页面test.html，

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景</title><style>*{margin: 0;padding: 0;}/* 测试背景效果 */body > div{}</style>
</head><body><div>背景效果测试</div>
</body></html>

准备一张背景图片，可以将其大小设置的稍微小一点；

三、background-color

该属性用来设置HTML元素的背景颜色；

序号属性值描述
1color

指定背景颜色；

2transparent指定背景颜色透明（默认）；
3inherit指定该值从父元素继承；

其中的color用来指定设置具体的背景颜色；

可以是CSS 中的16进制颜色、RGB颜色、系统预定义的颜色等；

/* 测试背景效果 */
body > div{height: 200px;padding: 20px;margin: 20px;border: 1px solid #999;/* 1、设置背景颜色 */background-color: yellowgreen;
}

四、background-image

该属性用来设置HTML元素的背景图像；

注意：背景图像并不一定是图片；

序号属性值描述
1none无背景图像（默认）；
2url()指定背景图像的url；
3linear-gradient()创建线性渐变背景图像；
4

radial-gradient()

创建径向渐变背景图像；
5repeating-linear-gradient()创建重复的线性渐变背景图像；
6repeating-radial-gradient()创建重复的径向渐变背景图像
7inherit指定该值从父元素继承；

1、url()

用来指定图片作为元素的背景图像，参数为图片的URL路径；

/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");
}

注意：

  • 这里虽然指定了图片为背景，但是该背景图像的大小、位置都是不合适的；
  • 需要结合后面介绍的背景属性做进一步调整； 
  • 如果只是简单指定一张背景图片，其大小跟盒子的大小不一定是完全一致的；
  • 背景图的渲染是从左上角开始；图片过大，会被剪裁；过小，则会平铺；

2、linear-gradient()

该函数用来创建线性渐变来背景图像；

background-image: linear-gradient(direction, start-color, ..., last-color);
  • direction：指定渐变的方向或者角度（可省略，默认从上往下）；
  • start-color, ..., last-color：用来指定渐变的起止颜色，需要制定两种及以上的颜色；
...
height: 200px;
...
/* 2、设置背景图像 */
background-image: linear-gradient(to right, yellow, yellowgreen);
...

注意：更多详细用法可参考CSS中的 linear-gradient() 函数； 

3、radial-gradient()

该函数用来创建径向渐变来背景图像；

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • shape：用来指定径向渐变圆的类型——ellipse (默认)、circle；
  • size：用来指定径向渐变的大小——farthest-corner (默认)、closest-side、closest-corner、farthest-side；
  • position：用来指定径向渐变的位置——center（默认）、top、bottom； 
  • start-color, ..., last-color：用来指定渐变的起止颜色；
...
height: 200px;
...
/* 2、设置背景图像 */
background-image: radial-gradient(circle at bottom, yellow, yellowgreen); 
...

注意：更多详细用法可参考CSS中的 radial-gradient() 函数；

4、repeating-linear-gradient()

该函数用来创建重复的线性渐变背景图像；

与linear-gradient()函数的工作方式类似，到达终点会进行重复；

...
height: 200px;
...
/* 2、设置背景图像 */
background-image: repeating-linear-gradient(to right, yellow 10%, yellowgreen 20%);
...

注意：更多详细用法可参考CSS中的 repeating-linear-gradient() 函数；

5、repeating-radial-gradient()

该函数用来创建重复的径向渐变背景图像；

与radial-gradient()函数的工作方式类似，到达终点会进行重复；

...
height: 200px;
...
/* 2、设置背景图像 */
background-image: repeating-radial-gradient(circle at bottom,  yellow 40%, yellowgreen 60%);
...

注意：更多详细用法可参考CSS中的 repeating-radial-gradient() 函数；

五、background-repeat

该属性用来设置元素背景图像的重复效果；

序号属性值说明
1repeat设置背景图像在垂直和水平方向重复（默认值）；
2repeat-x设置背景图像只在水平方向重复；
3repeat-y设置背景图像只在垂直方向重复；
4no-repeat设置背景图像不重复；
5inherit设置该值从父元素继承；
/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");/* 3、设置背景图像重复效果 */background-repeat: no-repeat;
}

 在实际开发中，一般都是设置背景不重复，很少有需要重复的时候；

六、background-position

该属性用来设置元素背景图像的起始位置；

序号属性值描述
1positionx  positiony第一个值指定水平方向起始位置；第二个值指定垂直方向起始位置；
2inherit指定该值从父元素继承；

注意：

  • 如果不指定，默认从左上角开始；
  • positionx和positiony的取值可以是方位关键字、百分比、像素，或其他任何的CSS单位；
  • 如果仅指定一个方位关键字，另一个会是center；
  • 如果仅指定一个百分比，另一个会是50%；
/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");/* 3、设置背景图像重复效果 */background-repeat: no-repeat;/* 4、设置背景图像的起始位置 */background-position: 50% top;
}

七、background-size

该属性用来设置元素背景图像的大小；

序号属性值说明
1sizex  sizey第一个值设置宽度，第二个值设置的高度；默认为auto；
2cover设置图像保持纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小。
3contain设置图像保持纵横比，并将图像缩放成将适合背景定位区域的最大大小。
4inherit设置该值继承自父元素；

1、sizex  sizey

指定宽度和高度，图片会被拉伸变形；

/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");/* 3、设置背景图像重复效果 */background-repeat: no-repeat;/* 4、设置背景图像的起始位置 */background-position: center;/* 5、设置背景图像的大小 */background-size: 80% 300px;  
}

 2、contain

保持图片的纵横比，但在放大或缩小时，不会超过父盒子的宽高；

...
/* 5、设置背景图像的大小 */
background-size: contain;  
...

3、cover

保持图片的纵横比，放大或缩小时，会使图片完全覆盖父盒子，超出部分被剪裁；

配合background-position属性，显示出背景图片的中心部分；

...
/* 5、设置背景图像的大小 */
background-size: cover; 
...

八、background-attachment

该属性用来设置背景图像是否固定；

序号属性值描述
1scroll设置背景图片随着页面的滚动而滚动（默认值）；
2fixed设置背景图片不会随着页面的滚动而滚动；
3local设置背景图片会随着元素内容的滚动而滚动；
4initial设置为默认值。 
5inherit设置该值继承自父元素；

（1）fixed

设置背景图像固定，不会随着页面内容的滚动而滚动；

/* 测试背景效果 */
body > div{height: 200px;line-height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;overflow-y: scroll;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");/* 3、设置背景图像重复效果 */background-repeat: no-repeat;/* 4、设置背景图像的起始位置 */background-position: center;/* 5、设置背景图像的大小 */background-size: cover;  /* 6、设置背景图片是否固定 */background-attachment: fixed;
}

（2）local

设置背景图片不固定，随着内容的滚动而滚动；

...
/* 6、设置背景图片是否固定 */
background-attachment: local;
...

九、background-clip

该属性用来设置元素背景的绘制区域；

序号属性值说明
1border-box设置元素背景绘制在border内（剪切成border方框）；默认值；
2padding-box设置元素背景绘制在padding内（剪切成padding方框）；
3content-box设置元素背景绘制在content内（剪切成content方框）；

（1）border-box

以元素边框border区域为界限绘制背景，默认值；

/* 测试背景效果 */
body > div{height: 200px;padding: 20px;margin: 20px;border: 10px dotted #999;/* 1、设置背景颜色 */background-color: yellowgreen;/* 7、设置背景绘制区域 */background-clip: border-box;
}

（2）padding-box

 以元素内边距padding区域为界限绘制背景；

...
/* 7、设置背景绘制区域 */
background-clip: padding-box;
...

（2）padding-box

 以元素内内容content区域为界限绘制背景；

...
/* 7、设置背景绘制区域 */
background-clip: content-box;
...

十、background-origin

该属性用来设置元素背景图像的定位区域；指定background-position属性应该是相对位置；

（1）border-box

相对border位置，定位背景图像；

/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 10px dotted #999;/* 2、设置背景图像 */background-image: url("D:\\test\\bg-img.jpg");/* 3、设置背景图像重复效果 */background-repeat: no-repeat;/* 8、设置背景图像的定位区域 */background-origin: border-box;
}

（2）padding-box

相对padding位置，定位背景图像，默认值；

...
/* 8、设置背景图像的定位区域 */
background-origin: padding-box;
...

（3）content-box

相对content位置，定位背景图像；

...
/* 8、设置背景图像的定位区域 */
background-origin: content-box;
...

十一、background

CSS 背景的简写属性，可以在这个属性中设置所有的背景属性；

分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image；

空格分隔，不分先后顺序；

/* 测试背景效果 */
body > div{height: 500px;padding: 20px;margin: 20px;border: 1px solid #999;/* 设置 元素背景  */background: yellowgreen url("D:\\test\\bg-img.jpg") no-repeat center fixed border-box;}

====================================================================

每天进步一点点~！

记录一下CSS背景的相关内容！

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

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

相关文章

零障碍入门：SSH免密登录与Hadoop生态系统的完美搭档【实训Day02】

零障碍入门：SSH免密登录与Hadoop生态系统的完美搭档【实训Day02】

一、 SSH免密登录配置 1 生成公钥和秘钥(在hadoop101上) # su star # cd /home/star/.ssh # ssh-keygen -t rsa 2 公钥和私钥 公钥id_rsa.pub 私钥id_rsa 3 将公钥拷贝到目标机器上(在hadoop101上) # ssh-copy-id hadoop101 # ssh-copy-id hadoop102 # ssh-co…
阅读更多...
保存huggingface缓存中AI模型（从本地加载AI模型数据）

保存huggingface缓存中AI模型（从本地加载AI模型数据）

在github下拉项目后,首次运行时会下拉一堆模型数据&#xff0c;默认是保存在缓存的&#xff0c;如果你的系统盘空间快满的时候就会被系统清理掉&#xff0c;每次运行又重新下拉一次&#xff0c;特别麻烦。 默认下载的缓存路径如下&#xff1a;C:\Users\用户名\.cache\huggingf…
阅读更多...
数据库管理系统中的磁盘、文件、页和记录管理

数据库管理系统中的磁盘、文件、页和记录管理

1. 引言 数据库管理系统&#xff08;DBMS&#xff09;是一个复杂的软件系统&#xff0c;用于管理和操作数据库中的数据。DBMS需要有效地在磁盘和内存之间组织和管理数据&#xff0c;以确保高效的数据存储和检索。本文将详细介绍DBMS中关于磁盘、文件、页和记录的管理&#xff…
阅读更多...
GD32实战项目-app inventor-BLE低功耗DX-BT24蓝牙上位机制作-文末有关于生成的软件闪退或者卡死问题的解决

GD32实战项目-app inventor-BLE低功耗DX-BT24蓝牙上位机制作-文末有关于生成的软件闪退或者卡死问题的解决

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布&#xff1a; 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转&#xff1a; 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…
阅读更多...
zabbix 配置企业微信告警

zabbix 配置企业微信告警

1、申请一个企业微信&#xff0c; 官网链接 2、群内申请一个机器人 下载电脑版企业微信&#xff0c;登录后&#xff0c;在要接收群消息的群里&#xff0c;点击右上角三个点&#xff0c;添加机器人后&#xff0c;保存机器人的webhook地址 上传应用logo&#xff0c;填写应用名称…
阅读更多...
论文学习——基于区域多向信息融合的动态多目标优化引导预测策略

论文学习——基于区域多向信息融合的动态多目标优化引导预测策略

论文题目&#xff1a;Guided prediction strategy based on regional multi-directional information fusion for dynamic multi-objective optimization 基于区域多向信息融合的动态多目标优化引导预测策略&#xff08;Jinyu Feng a, Debao Chen b,c,d,∗, Feng Zou b,c, Fan…
阅读更多...
微机原理 程序设计题

微机原理 程序设计题

数字0~9、A~Z、a~z DATA SEGMENTINFOR1 DB 0AH, 0DH, "Please Press Any Key to input a letter :$"INFOR2 DB 0AH, 0DH, "You Input a Lowercase Letter! $"INFOR3 DB 0AH, 0DH, "You Input a Uppercase Letter! $"INFOR4 DB 0AH, 0DH, "…
阅读更多...
100个名人的家，娄艺潇的家：大美国色，浪漫栖居

100个名人的家，娄艺潇的家：大美国色，浪漫栖居

冠珠瓷砖「100个名人的家」&#xff0c;大美筑家&#xff0c;中国冠珠2024大美筑家之旅&#xff0c;冠珠瓷砖「100个名人的家」&#xff0c;探索中国人的烟火浪漫与美学追求。从中国家文化、人文居所、人生底蕴层面&#xff0c;发掘大美人居的故事&#xff0c;以中国瓷砖、空间…
阅读更多...
ll命令在ubuntu下不能使用的解决方案

ll命令在ubuntu下不能使用的解决方案

ll命令在ubuntu下不能使用的解决方案 问题&#xff1a; ll命令在ubuntu下不能使用&#xff0c; 在Ubuntu终端里执行ll,提示:command not found 解决方案&#xff1a; 打开当前用户目录下的.bashrc文件 找到下面的内容&#xff0c;将前面的“#”去掉 #alias llls -alF 然…
阅读更多...
《vue3》reactivity API（vue3的$set呢?）

《vue3》reactivity API（vue3的$set呢?）

在Vue2中&#xff0c;修改某一些数据&#xff0c;视图是不能及时重新渲染的。 比如数组 <div> {{ myHobbies }} </div>data: () > ({myHobbies: [篮球, 羽毛球, 桌球] }); mounted () {this.myHobbies[1] sing; // 视图层并没有改变 }因此&#xff0c;Vue2就提…
阅读更多...
代码随想录算法训练营第四十三天| 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II、 123.买卖股票的最佳时机III

代码随想录算法训练营第四十三天| 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II、 123.买卖股票的最佳时机III

121. 买卖股票的最佳时机 题目链接&#xff1a;121. 买卖股票的最佳时机 文档讲解&#xff1a;代码随想录 状态&#xff1a;做出来了 贪心思路&#xff1a; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取最左最小值&#xff0c;取最右最大值&#xff0c;那么得到的…
阅读更多...
Nuxt3 的生命周期和钩子函数（十）

Nuxt3 的生命周期和钩子函数（十）

title: Nuxt3 的生命周期和钩子函数&#xff08;十&#xff09; date: 2024/6/30 updated: 2024/6/30 author: cmdragon excerpt: 摘要&#xff1a;本文详细介绍了Nuxt3框架中的五个webpack钩子函数&#xff1a;webpack:configResolved用于在webpack配置解析后读取和修改配置…
阅读更多...
【C语言】break 关键字

【C语言】break 关键字

当在C语言中使用break关键字时&#xff0c;它通常用于两种主要情况&#xff1a;在循环中和在switch语句中。让我们详细看看每种情况下的用法和作用。 在循环中的使用&#xff1a; 在循环中&#xff0c;break语句的作用是立即终止当前所在的循环&#xff0c;然后跳出循环体执行…
阅读更多...
UE插件与云渲染：10个提升效率的选择

UE插件与云渲染：10个提升效率的选择

Unreal Engine&#xff08;虚幻引擎&#xff09;的插件生态丰富多样&#xff0c;从提升视觉效果到优化工作流程&#xff0c;为开发者提供了无限扩展的可能。本文推荐10款备受欢迎的插件&#xff0c;助你激发创意&#xff0c;提升开发效率. 一、地牢建筑师&#xff1a;程序化关…
阅读更多...
EDUSRC-我与xx职院的爱恨情仇（教育漏洞挖掘）

EDUSRC-我与xx职院的爱恨情仇（教育漏洞挖掘）

一、人生中的第一个漏洞 2024.1月的时候&#xff0c;当时看朋友挖到了一个名校的漏洞&#xff0c;特别羡慕&#xff0c;我也想挖&#xff0c;但是当时什么都不会&#xff0c;就只好在网上搜edusrc挖掘思路、edusrc挖掘教程等等&#xff0c;边学边挖&#xff0c;边挖边学。 一开…
阅读更多...
【数据结构】04.单链表

【数据结构】04.单链表

一、链表的概念及结构 概念&#xff1a;链表是⼀种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 节点的组成主要有两个部分&#xff1a;当前节点要保存的数据和保存下⼀个节点的地址&#xff08;指针变量&#…
阅读更多...
nginx重定向

nginx重定向

nginx的重定向 location 匹配 location 匹配的就是后面的URI /wordpress location 匹配的分类和优先级** 1、精确匹配 location / 对字符串进行完全匹配&#xff0c;必须完全符合 2、正则匹配 ^~ 前缀匹配&#xff0c; 以什么开头 -区分大小写的匹配 ~*不区分大小写 …
阅读更多...
数字化精益生产系统--MES制造管理系统

数字化精益生产系统--MES制造管理系统

MES制造管理系统&#xff08;Manufacturing Execution System&#xff09;是现代制造企业中至关重要的管理工具&#xff0c;它集合了软件与多种硬件设备&#xff0c;形成了一个综合智能化系统&#xff0c;对从原材料上线到成品入库的整个生产过程进行实时数据采集、控制和监控。…
阅读更多...
java 基础之 反射技术_java 程序src阶段 class对象阶段 run阶段3个阶段

java 基础之 反射技术_java 程序src阶段 class对象阶段 run阶段3个阶段

System.out.println(in); } publicClass[] aa1(String name, int[] password){ returnnew Class[]{String.class} ; } privatestatic void aa1(int num){ System.out.println(num“静态方法”); } public static void main(String[] args){ System.out.println(“main”…
阅读更多...
香港即将“放松”加密货币监管！加密牌照制度备受批评！全球主力军无法进入香港市场？动摇了香港Web3的信心！

香港即将“放松”加密货币监管！加密牌照制度备受批评！全球主力军无法进入香港市场？动摇了香港Web3的信心！

2024年7月3日&#xff0c;香港金融服务及库务局局长许正宇在立法会会议上表示&#xff0c;香港金融管理局(HKMA)和证券及期货事务监察委员会(SFC)将根据市场发展情况&#xff0c;适时检讨虚拟资产相关活动的监管要求。 这一表态引发了人们对香港加密货币监管框架可能进行调整的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023