CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》,给自己的未来打气!

5.1 设定背景图的大小

在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的。如果同样的图片要在多个不同的地方作为背景的话,就必须用制图工具做成不同的尺寸,这一方面加大了开发者的工作量,另一方面也占用了更多的磁盘空间和网络空间。在CSS 3中,开发者可以使用background-size属性来规定背景图片的尺寸,这就可以在不同的环境中重复使用背景图片了。例如下面的代码:

div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

最基本的用法当然是直接使用长度单位或者百分比来指定背景的尺寸,其中第1个值是宽度,第2个值是高度。如果只设置一个值,则高度默认是auto。

background-size还有两个可选项:cover和contain。这两个选项都不会造成图像比例失真。其中cover相当于宽度等于元素宽度、高度设为auto的情况;而contain则相当于高度等于元素高度、宽度设为auto的情况,下面举例说明。

首先,先设置一个高度和宽度均为300像素的容器,然后将一张1600 × 1200尺寸的图片设置为图片的背景:

<style>
.container{
  background:url(naicha.jpg) no-repeat;
  border: 2px solid black;
  margin:auto;
  width:300px;
  height:300px;
}
</style>
<div class="container"></div>

效果如图5.1所示,由于背景取决于背景图片的尺寸,但背景图片太大,导致实际只显示了原图的左上角的部分。

enter image description here 图5.1 原始图片背景

下一步加上background-size,效果如图5.2所示。

<style>
.container{
  background:url(naicha.jpg) no-repeat;
  background-size: 100% auto;    /*设置宽度100%,高度自动*/
  /*使用background-size: 100% auto; 等效于使用background-size: contain; */
  -webkit-background-size: 100% auto;
  border: 2px solid black;
  margin:auto;
  width:300px;
  height:300px;
}
</style>
<div class="container"></div>

现在读者可以发现图片的全貌展现出来了,宽度等于容器宽度,高度则根据原图比例生成,最终得到和原图比例一致的背景图片,使用background-size: contain;等效于使用background-size: 100% auto;。

如果想占满容器的高度,则只需设置background-size: auto 100%;或者background-size: cover;即可,效果如图5.3所示。 enter image description here 图5.2 background-size: contain效果

enter image description here 图5.3 background-size: cover效果

注意:background-size一定要在指定图片后设定,否则不会生效。

最后来个书的封面图吧,有学习的一起交流 enter image description here enter image description here

评论
发表评论
5年前
赞了此文章!
5年前
赞了此文章!
WRITTEN BY
90后玩时尚技术
喜欢前端技术,最热爱jquery和js,CSS一般,HTML一般。
TA的新浪微博
PUBLISHED IN
前端技术推荐、笔记、后悔药

我说的你可以不信 我写的你可以不看 但是你说的我都会看

我的收藏