CSS背景属性 可以给页面元素添加背景样式
背景属性可设置背景颜色、背景图片、背景平舖、背景图片位置、图像固定等等
1.背景颜色
background-color属性可定义元素的背景颜色
background-color:颜色值;
background-color:red;
默认为透明值: transparent
2.背景图片
background-image属性可定义元素的背景图片
於logo或一些装饰性的小图片或是超大的背景图片是常见的使用情况
优点是较於便於控制位置
background-image : none|url(url)
默认值为none(没有图片)
3.背景平舖
background-repeat属性定义背景图片的平铺
background-repeat:repeat|no-repeat|repear-x|repeat-y
repeat (背景图像片在纵向和横向上的平铺 (默认))
no-repeat(背景图片不平铺)
repeat-x (背景图片在x轴(横向)平舖
repeat-y (背景图片在y轴(纵向)平舖
round (使用缩放或变形的方式,让背景图片在不裁切的情况下填满背景。)
4.背景图片位置
利用background-position:x y进行调整背景图片位置
参数代表的意思是X座标或Y座标 可以使用方位名词或是精确单位
backgorund-position:x y;
length 百分数组成的长度值
position top|center|bottom|left|right| (方位名词)
备注 :
参数是方位名词时
如果指定的两个值都是方位名词,则两个值前後顺序无关
比如left top和top left效果是一致
只指定了一个方位 另外一个值省略,则第二个值默认居中对齐
参数是精确单位时
若是精确座标 前一定为X座标 後一定为Y座标
若只指定一个数值 该数值一定为X 另一个为居中
参数是混和单位时
使用方位名词时看则精确单位 ex: 20px center
第一个值为X座标 第二个值为Y座标
5.背景图像固定
background-attachment 属性设置背景图像是否固定或随着页面的其余部分滚动
且後期可以制作视差滚动的效果
background-attachment: scroll | fixed
scroll = 背景图像随对象内容进行滚动
fixed = 背景图像固定
6.背景复合写法
以上背景属性皆可简写在一个属性background中去进行设定背景元素
普遍使用的约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background:red url(image.jpg) repeat-y fixed top;
7.背景色半透明做法
CSS3为我们提供了背景颜色半透明的效果
background: rgba(0,0,0,0.3);
- 最後一个参数是alphe透明度 取值在0-1之间
- 习惯把0.3的0省略掉
- 注意: 背景半透明是指盒子背景半透明 内容不影响
背景属性 codepen:
可自己copy code 带入图片尝试
<<: 第4车厢-老师在说你有没有在听?浅谈CSS选择器及优先权
昨天我们讨论的函式,是没有返回数值的函式,只是单纯传入参数做运算後,直接输出。但我们更多时候会需要把...
为什麽我想自己实作 Ktor OpenAPI Generator? 大多数的 Web 框架都有官方或...
您的订阅是我制作影片的动力 订阅点这里~ 资料集下载处 影片程序码 ## 应用五: 分群建模 ###...
在上一篇我们已经安装好 rspec 也产出了 User model 接下来就开始尝试写测试搂! 我在...
Customers can take the membership on a month to mo...