CSS背景相关属性
一、背景颜色
属性名:background-color (bgc)
属性值:颜色取值:关键字,rgb表示法,rgba表示法,十六进制表示。
注:
- 背景颜色默认透明:rgba(0,0,0,0);transparent
- 背景颜色不会影响盒子大小,并且还能看清盒子大小和位置,一般在布局中会习惯先给盒子设置背景颜色。
二、背景图片
属性名:background-image (bgi)
属性值:background-image:url("图片路径");
注:
- 背景图片中url可以省略引号。
- 背景图片默认在水平和垂直方向平铺。
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的。
三、背景平铺
属性名:background-repeat (bgr)
属性值:
取值 | 效果 |
repeat | (默认值)水平和垂直方向 |
no-repeat |
不平铺 |
repeat-x | 沿水平方向(x轴)平铺 |
repeat-y | 沿垂直方向(y轴)平铺 |
四、背景图位置
属性名:background-position (bgp)
属性值: background-position:水平方向位置 垂直方向位置
注:
- 方位名词取值和坐标取值可以混用。
- 第一个取值表示水平,第二个取值表示垂直。
五、背景相关属性连写
属性名:background(bg)
属性值:单个属性值的合写,取值之间以空格隔开
书写顺序:推荐顺序:background:color image repeat position
背景图位置如果是英文单词可以交换水平垂直位置顺序,如果是数值,不可以颠倒顺序。
省略问题:可以按需求省略。
六、img标签(插入图)和背景图片的区别
需求:在网页中展示一张图片的效果?
①直接写上img标签即可
②div标签 背景图片
(需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签)
img用来实现网页中比较重要的图片。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbcike
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01