CSS 背景

CSS 背景

背景颜色

背景颜色若不设置,默认为透明(transparent)

html 复制代码
background-color: 颜色;

背景颜色半透明

html 复制代码
background: rgba(0, 0, 0, 0.3)

前三个参数设定颜色,最后一个参数(例如上述例子中的0.3)设定透明度。0~1: 0对应透明,1对应实色

背景图片

常用于logo / 装饰性的小图片 / 超大背景图

该设定易于控制位置

html 复制代码
background-image:  (url)

背景图片位置控制

html 复制代码
background-position: x y;

x:x坐标

y:y坐标

可以使用方位名词 或者精确单位

1、方位名词

left | right | center 对应水平方向

top | bottom | center 对应垂直方向

需求设定:水平居中 垂直靠上

html 复制代码
background-portion: center top

注意:

(1)center top 与 top center 效果等价,即两者的顺序可交换

(2)若只写出一个方位,则另一个方位参数默认为center

2、精确单位

若使用精确坐标,两个方位输入有严格顺序

html 复制代码
background-position: x y;

x严格对应水平方向,y严格对应垂直方向

eg:

html 复制代码
background-position: 20px 50px;

20px对应与左边的距离为20px,50px对应与上边的距离为50px

3、混合单位

混合单位指:方位名词+精确单位

同理,两个方位有严格顺序。

eg:水平方向与左边距离20px,垂直方向居中。

html 复制代码
background-position: 20px center;

背景平铺

对一个盒子设定背景图片,当图片尺寸小于盒子,则图片将重复以平铺满盒子(默认情况),如下图所示:

完全不平铺

设定:

html 复制代码
background-repeat: no-repeat; //不平铺

则背景图不会平铺满整个盒子,如下图所示:

仅x轴平铺

html 复制代码
background-repeat: repeat-x;

仅y轴平铺

html 复制代码
background-repeat: repeat-y;

背景平铺总结

注意:背景图片和颜色可以同时设定,但是图片会盖在颜色上方。

背景固定与滚动

html 复制代码
background-attachment: fixed | scroll; 

fixed:背景图片固定

scroll:背景图片随着对象内容而滚动

背景属性复合写法

html 复制代码
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景总结

相关推荐
Baklib梅梅7 小时前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
卷Java8 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
FogLetter8 小时前
前端性能救星:虚拟列表原理与实现,让你的10万条数据流畅如丝!
前端·性能优化
我是天龙_绍8 小时前
前端驼峰,后端下划线,问:如何统一?
前端
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
code_YuJun8 小时前
nginx 配置相关
前端·nginx
对不起初见9 小时前
PlantUML 完整教程:从入门到精通
前端·后端
东方掌管牛马的神9 小时前
oh-my-zsh 配置与使用技巧
前端
你的人类朋友10 小时前
HTTP请求结合HMAC增加安全性
前端·后端·安全