一、 网页中添加图片的方式有两种

一种是:通过<img>标签直接插入到html中

另一种是:通过css背景属性添加

居中方法:水平居中的text-align:center 和 margin:0 auto

极客学院例子
http://www.jikexueyuan.com/course/656_3.html?ss=1
css背景图片的设置:

http://paranimage.com/css-background-attribute/

概述

CSS2 中有5个主要的背景(background)属性,它们是:

* background-color: 指定填充背景的颜色。

* background-image: 引用图片作为背景。

* background-position: 指定元素背景图片的位置。

* background-repeat: 决定是否重复背景图片。

* background-attachment: 决定背景图是否随页面滚动。

多背景

新属性:背景修剪(background-clip)

新属性:背景原点(background-origin)

新属性: 背景尺寸(background-size)

新属性:(background-break)

背景色(background-color)的改进

背景平铺(background-repeat)的改进

背景附着(background-attachment)的改进

新属性:背景原点(background-origin)

这个属性和 background-position 结合起来使用。可以从边框,内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.inf

Bootstrap css背景图片的设置的更多相关文章

  1. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  2. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  3. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  4. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  5. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  6. 【转】链接伪类(:hover)CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  7. Python爬虫之提取Bing搜索的背景图片并设置为Windows的电脑桌面

      鉴于现阶段国内的搜索引擎还用不上Google, 笔者会寻求Bing搜索来代替.在使用Bing的过程中,笔者发现Bing的背景图片真乃良心之作,十分赏心悦目,因此,笔者的脑海中萌生了一个念头:能否自 ...

  8. background-image 背景图片的设置

    background-image 背景图片的设置 属性:background-image: url(img/banner.jpg); 1.设置背景图的宽度 background-size: 400px ...

  9. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

随机推荐

  1. JavaScript权威指南读书笔记

    JavaScript 1.变量 变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...

  2. JQuery学习之其他

    1.noConflict()方法:释放会$标识符的控制,这样其他也用$的脚本就可以使用它了 **全名代替简写的方法使用jQuery $.noConflict(); jQuery(document).r ...

  3. spring 架构学习

    学习目的用于抽象业务逻辑,因spring本身就是抽象业务逻辑的框架,如做业务架构网面的工作 spring为不二之选. 一些好的网址 http://www.ibm.com/developerworks/ ...

  4. 点击 Run 之后发生了什么?

    这是我以前去链家网面试的一个题目,当时回答不够全面,现在看了2016 WWDC以及Sunnyxx iDev大会的分享之后,感觉对这个问题有了一些简单的认识,就来总结下.如果大家有补充,麻烦评论下哦! ...

  5. Codeforces Round #345 (Div. 2)

    DFS A - Joysticks 嫌麻烦直接DFS暴搜吧,有坑点是当前电量<=1就不能再掉电,直接结束. #include <bits/stdc++.h> typedef long ...

  6. App测试时,区分客户端或服务器端导致问题产生的方法

    1.先确定产生问题的地方是否与服务器产生交互/通信,若无则非服务器问题: 2.通过Fiddler抓包,查看操作时调用的服务器接口是否正常并检查对应返回值: 3.若接口返回值正常,则需查看客户端对业务的 ...

  7. webApi实践:开始WebApi 2

      1.学习步骤总结 学习网址:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-you ...

  8. HDU5724 Chess(SG定理)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5724 Description Alice and Bob are playing a spe ...

  9. EF框架step by step(7)—Code First DataAnnotations(1)

    Data annotation特性是在.NET 3.5中引进的,给ASP.NET web应用中的类提供了一种添加验证的方式.Code First允许你使用代码来建立实体框架模型,同时允许用Data a ...

  10. BZOJ3591: 最长上升子序列

    因为是一个排列,所以可以用$n$位二进制数来表示$O(n\log n)$求LIS时的单调栈. 首先通过$O(n^22^n)$的预处理,求出每种LIS状态后面新加一个数之后的状态. 设$f[i][j]$ ...