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

背景复合属性

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

相关推荐
h周杰偷1 分钟前
vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用,无需开发
前端·vue.js·pdf
小孙姐25 分钟前
3——VUE侦听器和计算属性
前端·javascript·vue.js
Dragon Wu42 分钟前
Taro React小程序开发框架 总结
前端·react.js·前端框架·taro
nbsaas-boot1 小时前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa1 小时前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
龙虎榜小红牛系统1 小时前
Wordcloud也能生成一个,带html的词云图文件吗??
python·html·wordcloud
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚7 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志7 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github