CSS第十节-CSS背景backgroud用法
2023-4-14 博主:Splendor CSS笔记
CSS背景backgroud用法
backgroud:
background-color || background-image || background-repeat || background-position || background-attachment
属性
|
作用
|
值
|
background-color
|
背景颜色
|
预定义的颜色值/十六进制/RGB代码
|
background-image
|
背景图片
|
url(图片路径)
|
background-repeat
|
是否平铺
|
repeat/no-repeat/repeat-x/repeat-y
|
background-position
|
背景位置
|
length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法
|
background-attachment
|
背景固定还是滚动
|
scroll/fixed
|
background-color:颜色值; 默认的值是 transparent 透明的
例:
-
backgroud-color : red;
-
backgroud-color : rgb(0,0,0,0.3);
-
backgroud-color : #FFF;
background-image : none | url (url)
例:
-
backgroud-image: url(img/bg.jpg);
参数
|
作用
|
none
|
无背景图(默认的)
|
url
|
使用绝对或相对地址指定背景图像
|
background-repeat : repeat | no-repeat | repeat-x | repeat-y
例:
-
backgroud-repeat : repeat-x; /* 横向重复背景 */
参数
|
作用
|
repeat
|
背景图像在纵向和横向上平铺(默认的)
|
no-repeat
|
背景图像不平铺
|
repeat-x
|
背景图像在横向上平铺
|
repeat-y
|
背景图像在纵向平铺
|
background-position : x坐标 || y坐标
background-position : x方位词 || y方位词
例:
-
backgroud-position: 50px 60px; /* x轴移动50像素,y轴移动60像素 */
-
backgroud-position: right top; /* x轴最右,y轴最上(右上角)*/
-
backgroud-position: 50% 50%; /* 背景居中对其 */
-
注意:
-
必须先指定background-image属性
-
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
-
如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
-
如果只指定了一个方位名词,另一个值默认居中对齐。
-
如果position 后面是精确坐标, 那么第一个,肯定是 x 第二的一定是y
-
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
-
如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标
参数
|
值
|
length
|
百分数 | 由浮点数字和单位标识符组成的长度值
|
position
|
top | center | bottom | left | center | right 方位名词
|
background-attachment : scroll | fixed
例:
-
background-attachment : scroll ;
参数
|
作用
|
scroll
|
背景图像是随对象内容滚动
|
fixed
|
背景图像固定
|
背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
例:
-
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
-
最后一个参数是alpha 透明度 取值范围 0~1之间
-
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
-
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响
-
因为是CSS3 ,所以 低于 ie9 的版本是不支持的。
背景总结
属性
|
作用
|
值
|
background-color
|
背景颜色
|
预定义的颜色值/十六进制/RGB代码
|
background-image
|
背景图片
|
url(图片路径)
|
background-repeat
|
是否平铺
|
repeat/no-repeat/repeat-x/repeat-y
|
background-position
|
背景位置
|
length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法
|
background-attachment
|
背景固定还是滚动
|
scroll/fixed
|
背景简写
|
更简单
|
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
|
背景透明
|
让盒子半透明
|
background: rgba(0,0,0,0.3); 后面必须是 4个值
|
标签: CSS笔记