文档章节

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap读书笔记(1)背景图

柯南和由美
 柯南和由美
发布于 2014/11/28 14:40
字数 897
阅读 109
收藏 2

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习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所示,由于背景取决于背景图片的尺寸,但背景图片太大,导致实际只显示了原图的左上角的部分。

 

图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所示。

  

图5.2  background-size: contain效果

图5.3  background-size: cover效果

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

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


© 著作权归作者所有

柯南和由美
粉丝 8
博文 41
码字总数 31322
作品 0
海淀
私信 提问
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

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

woIwoI
2014/11/28
0
0
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
60
0
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐。 如设计师设计了一张背景图片作为标题背景,如图5.18所示。对于用电脑浏览网...

woIwoI
2014/12/12
0
0
【AngularJs学习笔记五】AngularJS从构建项目开始

AngularJs学习笔记 【AngularJs学习笔记一】Bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 【AngularJs学习笔记三】Grunt任务管理器 【AngularJs学习笔记四】Grunt +...

陶邦仁
2016/01/26
370
0
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景

CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开。 例如下面的代码: [html] view plaincopy ba...

woIwoI
2014/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

axios 使用步骤很简单,首先在前端项目中,引入 axios:

  前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建...

SEOwhywhy
36分钟前
4
0
c++ 创建对象的三种方法

c++有三种方法创建对象 结合代码来看 1 #include <iostream> 2 using namespace std; 3 class Test { 4 5 private: 6 public: 7 add() 8 { 9 ......

天王盖地虎626
50分钟前
1
0
ant 中的fileset include等拷贝

拷贝一个目录到指定目录下 例:<copy todir="${basedir}/new"> <fileset dir="${basedir}/old"> <include name="appgen" /> <include name="appgen/" /> <include name=appgen/**" /> <incl......

shzwork
56分钟前
2
0
react-jianshu项目的创建

创建项目 1、github上创建仓库react-jianshu 2、将项目克隆到本地git clone git@github.com:startjcu/react-jianshu.git 3、在当前目录(项目目录的上级目录)下执行create-react-app react-...

星闪海洋
今天
2
0
OSChina 周二乱弹 —— 小哥哥,你可以教我写代码吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @nnnm: 生活大爆炸,结束了,这部陪伴了漫长时间的情景喜剧,最终是以诺贝尔奖和大团圆收尾的。虽然,不算精彩,但也是温馨。而少年谢尔顿的...

小小编辑
今天
945
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部