CSS background属性之背景设置详解

转载 2015年11月18日 17:49:07

CSS background属性之主要背景属性

在CSS中,关于background属性,主要有5个相关的背景属性。如下所示:

  • background-color属性:设置背景颜色。
  • background-image属性:设置背景图片。
  • background-repeat属性:是否重复背景图片。
  • background-attachment属性:设置背景图片是否随页面滚动。
  • background-position属性:指定背景图片的位置。

这5个背景属性可以使用background属性代替。

背景占据了元素的全部内容区域,这个区域包含了元素的padding和border,但不包含margin。

background属性在Firefox、Safari、Opera和IE8中能够正常显示,但是在IE6和IE7中不包含border。background属性在浏览器中的显示情况,如下图所示:

background属性在浏览器中的显示情况

在上图中,我们看到,IE6和IE7的内容区域没有包含橙色的边框线(border)。


背景颜色——background-color属性

background-color属性使用纯色填充背景。设置背景颜色的方法有许多种,下面这3种方法显示的颜色是一样的:

background-color: #FF0000;
background-color: red;
background-color: rgb(255,0,0);

该属性还可以被设置为透明(transparent),从而使它下面的元素可以显示出来。


背景图片——background-image属性

background-image属性允许在背景中添加一张图片。该属性可以和background-color属性同时使用,因此,图片没有覆盖的地方都会显示出背景颜色。设置背景图片的方法如下:

background-image:url(image.jpg);

图片的路径是相对于样式表来说的。因此,在上面的代码中,表示图片和样式表位于同一个目录中。

再来观察一下下面的代码:

background-image:url(images/image.jpg);

表示图片在样式表所在的目录的一个名为images的子目录中。也就是说,images文件夹位于样式表所在的文件夹中。

另外,使用../表示上一级目录,比如

background-image:url(../images/image.jpg);

表示图片位于样式表的上级目录中的images子目录中。


背景平铺——background-repeat属性

设置背景图片时,图片在默认情况下会在水平和垂直方向上铺满整个元素。不过,我们也可以使图片只出现一次,或者只在一个方向上平铺。如下所示:

background-repeat: repeat;    /* 默认值,同时在水平和垂直方向上平铺 */
background-repeat: no-repeat; /* 图片只显示一次 */
background-repeat: repeat-x;  /* 图片沿水平方向(x轴)平铺 */
background-repeat: repeat-y;  /* 图片沿垂直方向(y轴)平铺 */
background-repeat: inherit;   /* 图片继承父元素的background-repeat属性 */

背景定位——background-position属性

background-position属性用于控制背景图片在元素中的位置。这个位置指定的是图片左上角相对于元素左上角的位置。

在下面的例子中,使用background-position属性来控制背景图片的位置,同时设置background-repeat为no-repeat;单位是像素;第一个数字表示水平(x轴)位置,第二个数字表示是垂直(y轴)位置:

/* 例1:默认值 */
background-position: 0 0; /* 图片左上角对齐元素的左上角 */

/* 例2:把图片向右边移动75像素 */
background-position:75px 0;

/* 例3:把图片向左移动75像素 */
background-position:-75px 0;

/* 例4:把图片向下移动100像素 */
background-position: 0 100px;

如下图所示:

使用background-position属性控制背景图片在元素中的位置

background-position属性还可以使用其它的长度单位、关键字或百分比来进行定位。

关键字在x轴上表示为left、center、right;在y轴上表示为top、center、bottom。

关键字的使用方法和像素值的使用方法一样,首先是x轴,然后是y轴。如下所示:

background-position: top right;

使用百分比也是类似的方法。

注意,使用百分比时,浏览器是以元素的百分比来设置图片的位置的。如下所示:

background-position: 100% 50%;

使用百分比定位时,是将背景图片的百分比指定的位置和元素的百分比位置对齐。就是说,使用百分比定位改变了背景图片和元素的对齐基点,不再像使用像素和关键字定位时,使用背景图片和元素的左上角为对齐基点。

上面的例子代码,就是将背景图片的100%(right) 50%(center)这个点,和元素的100%(right) 50%(center)这个点进行对齐的。如下图所示:

使用百分比定位背景图片的例子


背景图片是否滚动——background-attachment属性

background-attachment属性设置页面滚动时图片所处的状态。该属性的3个属性值为scroll(滚动)、fixed(固定)和inherit(继承)。inherit表示该元素继承它的父元素的background-attachment属性值。代码如下:

background-image:url(image.jpg);
background-position:0 0;
background-repeat:no-repeat;
background-attachment:scroll; /* 默认值,背景图片会随着页面的滚动而滚动 */

如下图所示:

确认背景图片随着页面滚动的示图

当页面向下滚动时,背景图片会向上移动,直到消失。

当background-attachment属性设置为fixed时,将页面向下滚动,而背景图片会待在它原来的位置上,不会随着元素进行滚动。代码如下:

background-image:url(image.jpg);
background-position:0 100%;
background-repeat:no-repeat;
background-attachment:fixed; /* 背景图片不会随着页面的滚动而滚动 */

如下图所示:

背景图片不会随着页面进行滚动的示图

页面在向下滚动的同时,图像仍然保持可见!

背景图片只能出现在它的父元素所能达到的区域。即使图片是相对于浏览器窗口进行定位的,但是,如果它的父元素不可见,图片就会消失。如下所示:

background-image:url(image.jpg);
background-position:0 100%;
background-repeat:no-repeat;
background-attachment:fixed; /* 背景图片只能出现在它的父元素所能达到的区域 */

上面的代码中,虽然背景图片位于浏览器窗口的左下方,但是只有元素内的图片部分是可见的。

如下图所示:

背景图片只能出现在它的父元素所达到的区域

因为背景图片是从元素外面开始的,所以元素外面的图片部分被切除了。


背景的简写属性——background属性

我们可以把背景的各个属性合并在一起使用,而不需要每次都把他们单独写出来。格式如下:

background:<color> <image> <position> <attachment> <repeat>

比如,下面的代码样式:

background-color:transparent;
background-image:url(image.jpg);
background-position:50% 0;
background-attachment:scroll;
background-repeat:repeat-y;

可以合并为一行:

background:transparent url(image.jpg) 50% 0 scroll repeat-y;

在上面的代码中,并不需要给出每一个值,如果某一个值没有指定,就会使用属性的默认值。比如,上面的代码和下面的代码效果是一样的:

background: url(image.jpg) 50% 0 repeat-y;

背景的一般性用法

除了给元素使用背景以外,背景还有以下的用法:

1. 仿栏

当使用float属性定位布局元素时,要确保两栏或多栏具有相同的长度是比较困难的。如果长度不同,则其中一栏的背景就会比另外栏的背景短,这样就破坏了整个布局的设计。

此时,不需要给每一列单独设置背景,而是给各列的父元素设置一个背景,这样,所有栏的设计就都包含在这张图片中了。

2. 文本替换

在网页上,有时候对于字体的选择是相当有限的。不过,有一个适用于所有浏览器的最简单的方法:

将要用的文本内容和要使用的字体做成一张文本图片,再把这张图片作为背景,然后再在网页中输入文本内容。这样,文本依然会出现在文档标签中,以供搜索引擎检索,但是,在浏览器中就会显示出首选的字体。方法如下:

<p class="one">这是一段文本内容!</p>

再做一张同样大小的图片,图片上面显示了自己想要的字体,此时,就可以用下面的方法来替换文本了:

h3.one{
width:200px;
height:75px;
background:url(text.jpg) 0 0 no-repeat;
text-indent: -9999px; /* text-indent属性:向左边移动文本内容的位置,以便隐藏起来。*/
}

3. 简单的圆点

无序列表中的圆点标记确实难看!我们可以将它隐藏起来,然后再使用背景图片来代替。代码如下:

ul{
list-style:none; /* 隐藏列表中的圆点标记 */
}
ul li{
padding-left:30px; /* padding-left属性:设置背景图片左边的距离 */
background:url(image.jpg) 0 0 no-repeat; /* 设置背景图片 */
}

因为我们能够灵活制作背景图片,所以根据上面的方法就可以制作出漂亮的无序列表标记来!

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单:    body { background-image;url(beijing.gif); backgroun...

CSS背景属性background详解

转载来自:https://paran.io/css-background-attribute/ 原文链接:Backgrounds In CSS: Everything You Need To...

css3实现一个div设置多张背景图片及background-image属性

css3实现一个div设置多张背景图片及background-image属性 2014年9月16日 52122次浏览 引子 以前做网页布局的时候,一个div只能设置一张背景图片,...
  • amy0821
  • amy0821
  • 2016年08月23日 17:26
  • 1036

css3实现一个div设置多张背景图片及background-image属性

引子 以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了...
  • twoto3_
  • twoto3_
  • 2016年09月20日 14:12
  • 1423

CSS背景属性Background详解

body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 定义和用法 back...
  • judyge
  • judyge
  • 2016年06月30日 16:13
  • 144

CSS背景属性Background详解

CSS背景属性Background详解 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性。如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详...

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单:    body { background-image;url(beijing.gif); backgroun...

css3实现一个div设置多张背景图片及background-image属性

以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了一个div只...
  • cwzhsi
  • cwzhsi
  • 2015年03月26日 20:40
  • 1133

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单:    body { background-image;url(beijing.gif); backgro...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS background属性之背景设置详解
举报原因:
原因补充:

(最多只允许输入30个字)