码迷,mamicode.com
首页 > 其他好文 > 详细

6.1.2.11 背景

时间:2018-07-12 22:39:34      阅读:132      评论:0      收藏:0      [点我收藏+]

标签: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;  # 固定背影不滚动

 

6.1.2.11 背景

标签:style   bgp   attach   应用   image   区域   透明   col   bottom   

原文地址:https://www.cnblogs.com/beallaliu/p/9302004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!