标签:style bgp attach 应用 image 区域 透明 col bottom
1. 背景颜色
backgroud-color: 单词 或 rgb(255,0,0) 或 十六进制 #ff0000
#ff(red)00(green)00(blue)
如果六位的红黄蓝各自都一样的话,可以简化成三位的。
如:#ff0000 等价于#f00
#112233 等价于#123
#121212 不能用三位表示。
colors 插件 拾色器
rgba(0,0,0,0.8) a是透明色
2. 背景图片
background-img: url(./bojie.jpg); 默认会平铺,显示N多张
backgroud-repeat: repeat;
backgroud-repeat: no-repeat;
backgroud-repeat: repeat-x; 水平方向平铺
backgroud-repeat: repeat-y; 垂直方向平铺
padding:100px; padding的区域也被平铺掉。
3. 背景定位
backgroud-position: 100px 100px (+向右移100px +垂直方向向下移100px)
快捷键 bgp<tab> -100px -100px (-向左移100px -向上移100px)
应用: CSS精灵图(雪碧图)
把小图标都合并在同一张图片上,减少服务器请求次数
backgroud-position:photoshop中X -Y的位置
# 水平方向:left center right
垂直方向:top center bottom
backgroud-position: center center; 水平 垂直
#水平居中通天banner图: 图片大于盒子的大小
backgroud-position: center top;
backgroud: red url(‘./images/banner.jpg‘) no-repeat center top;
# 前面三个位置可以做任意调,但center top 一定要挨着写。
4. backgroud-attachment
backgroud: url(‘‘) no-repeat 0 0 ;
backupgroud-attachment: fixed; # 固定背影不滚动
标签:style bgp attach 应用 image 区域 透明 col bottom
原文地址:https://www.cnblogs.com/beallaliu/p/9302004.html