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

时间:2022-09-21 22:04:51

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

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(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所示。

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

图5.2  background-size: contain效果

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

图5.3  background-size: cover效果

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

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

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

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

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图的更多相关文章

  1. CSS高效开发实战&colon;CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

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

  2. 【原创】CSS高效开发实战&colon;CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果

    阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很 ...

  3. CSS高效开发实战&colon;CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景

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

  4. CSS高效开发实战&colon;CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  5. 《Python高效开发实战》实战演练——内置Web服务器4

    <Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...

  6. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  7. 《Python高效开发实战》实战演练——建立应用2

    为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...

  8. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

  9. &lt&semi;c ss高效开发实战&gt&semi;看完了,Bootstrap学习是关键

    Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...

随机推荐

  1. 最短路径算法-Dijkstra

    Dijkstra是解决单源最短路径的一般方法,属于一种贪婪算法. 所谓单源最短路径是指在一个赋权有向图中,从某一点出发,到另一点的最短路径. 以python代码为例,实现Dijkstra算法 1.数据 ...

  2. ORACLE opatch命令学习实践

      opatch 是ORACLE开发的用来安装,卸载,检测patch冲突.管理ORACLE所有已经安装的补丁的工具,当然这是一个命令工具.opatch命令工具一般位于$ORACLE_HOME/OPat ...

  3. 基于MVC4&plus;EasyUI的Web开发框架形成之旅--总体介绍

    最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客里面介绍Web开发框架的文章比较少,其实以前在单位工作,80%的时间是做Web开发的,很早就形成 ...

  4. 《C&num;并行编程高级教程》第6章 PLINQ&colon;声明式数据并行 笔记

    PLINQ这个话题好多书都写到过,这本也没有什么特别好的地方. 几个有用和有趣的点记录一下.   顺序的不确定性 用PLINQ就一定要记住并行后会导致顺序不确定的问题.解决方案就是AsOrdered或 ...

  5. android利用剪切板来实现数据的传递

    在Android开发中我们经常要遇到的一个问题就是数据在不同的Activity之间的共享.在Android开发中有很多种方法可以达到这个目地. 这里介绍一种比较常见.又常用的一种方法就是使用剪切板.我 ...

  6. GCC编译器的安装

    1.GCC简介 GCC(GNU Compiler Collection)是一套功能强大.性能优越的编程语言编译器,它是GNU计划的代表作品之一.GCC是Linux平台下最常用的编译器,GCC原名为GN ...

  7. 统一代码风格工具——editorConfig

    前面的话 在团队开发中,统一的代码格式是必要的.但是不同开发人员的代码风格不同,代码编辑工具的默认格式也不相同,这样就造成代码的differ.而editorConfig可以帮助开发人员在不同的编辑器和 ...

  8. Java线程和守护进程

    ava的线程机制,有两类线程:User Thread(用户线程).Daemon Thread(守护线程) . 操作系统里面是没有守护线程的概念,只有守护进程,但是Java语言机制是构建在JVM的基础之 ...

  9. Spring Security 入门(1-4-1)Spring Security - 认证过程

    理解时可结合一下这位老兄的文章:http://www.importnew.com/20612.html 1.Spring Security的认证过程 1.1.登录过程 - 如果用户直接访问登录页面 用 ...

  10. 老男孩Python全栈学习 S9 日常作业 009

    1.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func1(List): List2 = [] for num in range(len(Li ...