css笔记：背景

最新推荐文章于 2024-05-14 18:01:48 发布

YX_C

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量120

点赞数

文章标签： css css3 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_58331488/article/details/124625272

版权

文章目录

单行文字垂直居中
115 背景颜色背景图片（background-color background-image）
117 背景平铺（background-repeat）
118 背景位置-方位名词（background-position）
119 案例（装饰性图标）
120 案例（背景大图）
121背景设置精确位置
122 背景位置混合单位
123 背景固定 background-attachment
124 背景属性复合写法
125 背景颜色半透明
126 背景总结
127 128五彩导航栏（无笔记）

在这里插入图片描述

单行文字垂直居中

在这里插入图片描述

115 背景颜色背景图片（background-color background-image）

在这里插入图片描述

默认是铺满效果

117 背景平铺（background-repeat）

在这里插入图片描述

118 背景位置-方位名词（background-position）

在这里插入图片描述如果是水平竖直都居中，就写background-position：center（或者center center，不过第二个不写也默认是center）

119 案例（装饰性图标）

在这里插入图片描述

120 案例（背景大图）

在这里插入图片描述原效果：

设置后的效果：

在这里插入图片描述

121背景设置精确位置

在这里插入图片描述例如这个图中的播放按钮的图标，就不是简单的left center 而是距离左边有一定的边距这就需要用到精确位置

在这里插入图片描述

122 背景位置混合单位

在这里插入图片描述

123 背景固定 background-attachment

视差滚动（背景图是固定的）的例子：QQ官网
在这里插入图片描述
默认是scroll

124 背景属性复合写法

在这里插入图片描述

125 背景颜色半透明

在这里插入图片描述

126 背景总结

在这里插入图片描述

127 128五彩导航栏（无笔记）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记：背景

文章目录单行文字垂直居中115 背景颜色背景图片（background-color background-image）117 背景平铺（background-repeat）118 背景位置-方位名词（background-position）119 案例（装饰性图标）120 案例（背景大图）121背景设置精确位置122 背景位置混合单位123 背景固定 background-attachment124 背景属性复合写法125 背景颜色半透明126 背景总结127 128五彩导航栏（无笔记）单行文字垂
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。