HTML(12)——背景属性

目录

背景属性

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定


背景属性

属性 描述
background-color 背景色
background-image (bgi) 背景图
background-repeat (bgr) 背景图平铺方式
background-position (bgp) 背景图位置
background-size (bgz) 背景图缩放
background-attachment (bga) 背景图固定
background 背景复合属性

背景图

使用背景图实现装饰性的图片效果。

属性值:url(背景图URL)

背景图默认是平铺的效果

背景图平铺方式

属性值 效果
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺

背景图位置

属性值:水平方向位置,垂直方向位置

关键字

关键字 位置
left 左侧
right 右侧
center 居中
top 顶部
button 底部

关键字取值写法,可以颠倒顺序

坐标:数字+px 正负都可

可以只写一个关键字,另外一个方向默认居中,坐标只写一个表示水平方向,垂直方向为居中

背景图缩放

常用属性值

  • 关键字

cover:等比缩放背景图片以完全覆盖背景区,可能背景图部分看不见

contain:等比缩放背景图片以完全装入背景区,可能背景区部分空白

  • 百分比:根据盒子尺寸计算图片大小
  • 数字+单位

背景图固定

作用:背景图不会随着元素的内容滚动

属性值:fixed

背景复合属性

属性值:背景色 背景图 背景图平铺方式 背景图位置/缩放 背景图固定(属性值之间空格隔开,不区分先后顺序)

相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端
foxhuli2293 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔4 小时前
CSS实现百分比水柱图
前端·css