七、CSS常用属性之背景

HTML、CSS基础课程系列 CSS

css常用属性之背景

什么是背景?

元素的背景是位于元素内容(content)、内边距(padding)和边框(border)下方的区域,看下图:

关于背景,有许多重要的属性来处理元素,接下来看看有那些:

下面,我们详细介绍一下上面这些属性

背景颜色

我们常用一些英文单词来记录一些颜色,比如一些基础颜色关键字:red、blue、yellow、green等,还有系统颜色关键字和扩展颜色关键字等等。当然我们不能花费大量的时间来记忆这些单词,这就意味着我们可以采用更好的颜色选择:16进制颜色、rgb或rgba格式。

  • 英文关键词。例如blueblackred等。
  • 16进制颜色。例如白色是#FFFFFF、黑色是#000000,你可以通过打开浏览器按F12来调整。
  • rgb或rgba格式。学过油画的同学都知道,任何颜色都可以从红色(r)、绿色(g)和蓝色(b)调和而成,这里也是这种意思,他们分别的取值范围为0-255。例如,红色为rgb(255,0,0),而 rgba里面的a代表透明度,取值范围为0-1,0代表完全透明,1是默认值。

背景图片

background-image属性是指定要在元素中显示的背景图像,通常使用url()里面写入图像资源地址来获取到静态图像文件,比如下面这种:

1
<p>比卡丘</p>

1
2
3
4
5
6
p{
width:940px;
height:57px;
padding:10px;
background-image: url(Pikachu.png);
}

结果显示这样子:

这样看起来不是很好,图像默认情况下是水平和垂直平铺的,所以我们需要用到background-repeat属性来解决这个问题。

注意,由于背景图像是CSS设置的,作为内容的背景部分,它只用作装饰。如果你想要把它当做HTML内容的一部分的话,请使用<img>标签。

背景平铺

background-repeat属性允许你指定如何重复背景图像,默认值是repeat。上面的情况不是我们想要的,那么先来看看它有那些值:

  • no-repeat:图像不平铺,只显示一次。
  • repeat-x:图像水平平铺。
  • repeat-y:图像垂直平铺。

现在来试着解决我们的问题,先给我们的文字美化下,然后让背景不平铺:

1
2
3
4
5
6
7
8
9
10
11
12
p{
width:940px;
height:57px;
padding:10px;
font-size:24px;
font-weight: bolder;
color:yellow;
line-height: 57px;
background-color: #55932d;
background-image: url(Pikachu.png);
background-repeat: no-repeat;
}

结果显示这样子:

从上图可以看出,背景图像看起来好一些了,但是它与我们的文本重叠了,这就需要把它移动到更好的位置去。

背景位置

background-position属性允许你如何指定背景图像的位置,一般来说,这个属性取两个值,以空格分割,前一个值代表水平位置,后一个值代表垂直位置。它有以下几种写法:

  • 写像素这样的绝对值,例如background-position:20px 30px
  • 百分比,例如background-position:90% 20%
  • 方位词,例如background-position:center right,这些方位词有centertopbottomleftright

注意,如果你只写一个值,该值将被假定为水平位置,默认垂直位置居中的。
现在,试着来改变上面例子的背景位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
p{
width:940px;
height:57px;
padding:10px;
font-size:24px;
font-weight: bolder;
color:yellow;
line-height: 57px;
background-color: #55932d;
background-image: url(Pikachu.png);
background-repeat: no-repeat;
background-position:90px center;
}

看下效果如何:

背景附件

background-attachment属性允许我们指定内容滚动时背景滚动的方式,一般来说有下面两个值:

  • scroll ,这是默认值,背景会随滚动条滚动而滚动。
  • fixed,固定背景,当页面滚动时,背景不会滚动。

这里找一张大的图片,然后给body添加一些高宽,使页面出现滚动条,试试自己做做看。

背景简写

从上面的例子可以看出,写出背景的每个属性是麻烦而且繁琐的事情,那么这里我们可以使用它们的简写方式:background,把这些值都放到background属性里面,以空格分割它们,比如上面的css可以改成下面这样:

1
2
3
4
5
6
7
8
9
10
p{
width:940px;
height:57px;
padding:10px;
font-size:24px;
font-weight: bolder;
color:yellow;
line-height: 57px;
background:#55932d url(Pikachu.png) no-repeat 90px center;
}

背景大小

background-size属性允许你指定背景图像的大小,它通常也是两个值,第一个值代表宽度,第二值代表高度,可以用绝对值px单位,也可以用相对值百分比rem这些,例如给上面的比卡丘加一个属性:

1
background-size:50px 50px;

看看效果:

当然,我们也可以把background-size属性加入到简写里面去,只是它和背景位置之间需要加入个/符号。

1
2
3
p{
background:#55932d url(Pikachu.png) no-repeat 90px center/50px 50px;
}

背景截图

背景截图是对于背景位置background-position的一种小技巧应用,它通过鼠标悬浮:hover,把背景位置变换到不同的地方,达到截图效果,举个例子:

这里有一张图片,它的高度是220px,宽度240px,通过观察可以发现,上半身和下半身是一样的,只是颜色不同,这里我们设置一个盒子box:

1
<div class="box"></div>

1
2
3
4
5
.box{
width:240px;
height:110px;
background:url(xslb.jpg);
}

这个盒子只有背景图片的一半大小,接下来见证奇迹的时候到了,我们给他加个鼠标悬浮效果:

1
2
3
4
.box:hover{
cursor:pointer; /* 鼠标手型 */
background-position:0 -110px;
}

试试把鼠标移到图像上面看看!

小结

这节课我们学习了css背景的相关属性,了解了背景的多变万化,使我们的页面更加多姿,下节课我们会学习CSS布局的另外一种:定位。

作业

①. 测试这节课学习的所有关于CSS背景的相关属性。

②. 测试背景简写是否与顺序有关。

③. 完成英雄联盟新手礼包页面的作业。

教材编写 myxxqy@gmail.com 张超
2017.07.19