文档章节

图解 CSS (4): background - 背景

涂孟超
 涂孟超
发布于 2014/09/26 15:34
字数 250
阅读 2
收藏 0
background
background-color
background-attachment
background-image
background-position
background-position-x
background-position-y
background-repeat

 
 
 
 
 

 

 

  

设置背景色(譬如红色): background-color: red; 或者 background: red;



背景图片: background-image: url(路径); 或者 background: url(路径);
其中的路径可以是相对或绝对路径, 可以带双引号或单引号.



background-repeat(背景图片反复方式): repeat(默认)、no-repeat、repeat-x、repeat-y.






background-position(背景图起始位置):
上中: top 或者 top center
上左: top left(默认)
上右: top right
中心: center 或者 center center
中左: left 或者 center left
中右: right 或者center right
下中: bottom 或者 bottom center
下左: bottom left
下右: bottom right
还可以用百分比或具体的数值描述: x% y% 或 xpos ypos













background-position 本来就是有 x、y 两个值构成的, 也可用
background-position-x 和 background-position-y 单独设定.

background-attachment(设置背景是否随滚动条滚动): scroll(默认)、fixed(不滚动).



用 background 可以同时设置:
background-color、background-attachment、background-image、background-position、background-repeat
竟没有顺序的要求, 也可随意省略, 只是 position 用两个值时不要分开即可.



本文转载自:http://www.cnblogs.com/del/archive/2009/01/28/1381229.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
私信 提问
css sprite 图片背景定位技术

加速的关键,不是降低重量,而是减少个数。如果重量在200K以内,只要网络不是特别慢,效率都差不多。但是,如果图片个数多一倍,效率将明显低一个档次。 传统切图讲究精细,图片规格越小越好...

xiahuawuyu
2012/05/15
0
0
图解CSS的padding,margin,border属性

图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的...

巴顿
2013/09/05
0
0
CSS3详解:background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。 1、多个背景图片 在css3里面,你可以再一个标签元素里应用多个...

DanielYue
2016/07/14
0
0
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道...

woIwoI
2014/11/28
0
0
CSS定位元素--背景

CSS 里也一样,每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color 属性),也可以包含任意多个背景...

风吹一米阳光
2015/09/22
56
0

没有更多内容

加载失败,请刷新页面

加载更多

eclipse中项目svn转gitLab全过程

在工作中,我们可能会遇到项目从svn迁移到gitLab;此过程我们需要变化版本管理工具,上传代码。本篇博客记录了使用spring tool suit(sts/eclipse)进行项目迁移的全过程。 步骤: (1)端口之...

em_aaron
27分钟前
0
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
40分钟前
1
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0
看了一下Maven的内容

了解了Maven其实是一个跨IDE的标准构建工具,能推广的原因估计是借了仓库的便利。 另一个作用是可以通过Maven的功能在社区版的IDEA去创建Web项目,下次实践看看

max佩恩
昨天
4
0
day27:expect批量杀进程|

1、linux下当前目录有一个文件ip-pwd.ini,内容如下: [root@localhost_002 shell100]# cat ip-pwd.ini 10.111.11.1,root,xyxyxy10.111.11.2,root,xzxzxz10.111.11.3,root,12345610.......

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部