威尼斯wns.9778官网 > 计算机教程 > CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Found

原标题:CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Found

浏览次数:126 时间:2019-07-05

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

图5.1  原始图片背景

威尼斯wns.9778官网 1

威尼斯wns.9778官网 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 ></div>  

  威尼斯wns.9778官网 3

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

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

  

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

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

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

  

图5.2  background-size: contain效果

  

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

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


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

威尼斯wns.9778官网 4

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

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

5.1  设定背景图的大小

 威尼斯wns.9778官网 5

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

图5.3  background-size: cover效果

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

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Found

关键词:

上一篇:MAC Lion 下安装php扩展 for XAMPP 之Redis

下一篇:没有了