背景颜色及背景图片相关的属性
1.background-color
设置背景颜色,取颜色值
注意:
1.所有元素默认的背景颜色都是透明色,新建窗口的白色不是body的背景色,是浏览器渲染的
2. 背景颜色从边框位置开始绘制
3. 如果元素添加内边距,也会按照背景颜色进行填充
2.背景图片
1.设置背景图片
属性:background-image
取值:url()
注意:1.背景图片的尺寸如果大于元素尺寸,图片仍然按照原始尺寸显示,超出元素的部分不可见
2.背景图片的尺寸小于元素尺寸,浏览器会自动对背景图片重复平铺,直到铺满元素
3.背景图片与背景颜色一样,不影响元素正常显示
2.设置背景图片的重复方式
图片尺寸不够时,浏览器会自动沿水平和垂直两个方向对图片进行重复平铺,直到铺满元素
属性:background-repeat
取值:1.repeat:默认值,沿水平和垂直方向平铺
2.repeat-x:沿水平方向平铺
3.repeat-y:沿垂直方向平铺
4.no-repeat:设置背景图片不重复平铺
3.设置背景图片的位置
1.属性:background-position
2.取值:x y
1.取像素值:
x:表示背景图片水平方向的偏移距离
正值表示图片向右偏移,负值表示图片向左偏移
y:背景图片垂直方向的偏移距离
正值表示图片向下偏移,负值表示图片向上偏移
注意:结合“精灵图”实现元素背景图片调整,这种技术叫“精灵技术”
2.取百分比
参照元素尺寸计算水平和垂直偏移距离
1. 0% 0%:背景图片显示在元素左上角
2. 50% 50%:背景图片显示在元素中间
3. 100% 100%:背景图片显示在元素右下角
3.方位值确定背景图片的位置
x:left / center / right
y: top / center / bottom
如果只设置一个方向上的关键字,另外一个方向默认是center
4.设置背景图片的大小
1.属性:background-size
2.取值:x y
x y分别表示背景图片的宽和高
1.像素值
2.百分比:参照元素宽高尺寸计算背景图片大小
3.cover:表示将图片等比放大至完全覆盖元素,超出部分不可见
4.contain:表示将图片等比拉伸至刚好被元素容纳,不能超出元素尺寸,可能或造成背景图片无法完全覆盖元素的效果
5.背景属性简写
1.属性:background
2.取值:color url() repeat position
注意:1.背景属性按照上面取值的顺序设置
2.background-size单独设置
转载于:https://www.cnblogs.com/zengsf/p/9794104.html
背景颜色及背景图片相关的属性相关推荐
- CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- css的背景颜色有哪些,css背景颜色、背景图片,以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
- html表格背景图片格式,css背景颜色、背景图片,以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
- CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
- CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)
CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
- pc端适配移动端之背景颜色和背景图片
翻开之前仿作的小米官网页面,打开谷歌浏览器的手机端界面,发现我之前做的界面背景颜色和背景图片会变得非常小,具体图如下: 可以看到我们无论是背景图片或者背景颜色都没有显示出来,针对这个问题先进行了思考 ...
- 【ChatGPT】Spire.Doc 给 Word 文档设置背景颜色和背景图片
使用 Spire.Doc 给 Word 文档设置背景颜色和背景图片 1.首先需要引用 Spire.Doc 的命名空间: using Spire.Doc; using Spire.Doc.Documen ...
- android textview 背景图片,Android—TextView 背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
最新文章
- 1.4 微生物对人类社会的影响
- Mongodb的锁 原子性 隔离性 一致性
- 荣耀30会升级鸿蒙吗,荣耀手机也能升级!第三批鸿蒙手机升级名单大曝光:全球第三稳了...
- SpringBoot集成MyBatis-Plus自定义SQL
- A few thoughts about Open Source Software
- 智能一代云平台(四):15年上半年维护过程中精彩小插曲
- 如何成为高级测试人?
- 使用php第三方包mpdf将网页装换成pdf文件【2】
- 解决keil注册机和编译错误的问题2020-12-28
- BI工具:cboard\superset 比较
- win10 C盘磁盘清理
- 【USB电压电流表】基于STM32F103C8T6 for Arduino
- 异地监控组网实战案例(速度快)
- 插入式CAN总线隔离适配器LCAN-Opto在高空作业平台上隔离干扰、调理信号的应用案例介绍
- 芯片优缺点_“碳基芯片”的材料,将采用碳纳米管制成,或比传统芯片提升10倍...
- Mac系统 - zsh所有命令失效解决方式
- 独立分包中包含app.wxss的问题
- 张正友棋盘法定标--Matlab【Camera Calibration Toolbox】
- AMD的双向田忌赛马:7nm中端CPU挑落顶级i9,旗舰GPU只对位NV三当家 | CES 2019
- Python 与神奇的数学之汉诺塔