background:pink;图片在背景图上面

background-image:url(food.jpg);一张图片铺满一行
background-repeat:repeat-x;同一张图片多张铺满横向

background-repeat:repeat-y;同一张图片多张铺满纵向

background-repeat:no-repeat;只在左上角显示一张按图片原来的大小显示

background-attachment:fixed;把图片固定在某处，图片不随着滚动条的滚动上下移动

background-position:center;图片位置居中

<style>
#test1{
 background:pink;
 background-image:url(food.jpg);
 height:493px;
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position:center;
}
</style>
</head>
<body>
<p id="test1">人生总有许多偶然和巧合，两条平行线，也可能会有交汇的一天。
人生又有许多意外和错过，握在手里的风筝，也会突然断了线……。 </p>
</body>

精确控制图片显示位置：

background-position:center  enter;

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
</style>
</head>
<body>
<div id="test1"></div>

</body>

用精确的像素来确定位置：

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
#test2{
 width:50px;
 height:30px;
 background-image:url(food1.jpg);
 background-position:-150px -500px;
}
<style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
</body>

把所有的代码写在一行里的顺序

后面是具体像素，显示图片上你需要的某部分，即用一张图做多个元素的背景，调整需要部分它的位置即可

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

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  3. css设置背景图片，ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  4. （转）background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

  5. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  6. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  7. css 设置背景图片透明

    最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

  8. css 设置背景图片铺满固定不动

    #page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. Macbook Pro 使用小记

    本周到手Macbook Pro,很激动.刚刚使用了几天,简单记下自己的感受.   Macbook Pro的硬件配置和做工真没得说,非常完美. 触控板很强大.很好用,鼠标可以基本不用了,但要稍微学习一下 ...

  2. 1.GoldenGate 简单的一对一配置

    一,软件安装   源端和目标端均执行(只要修改相应的目录)   1.上传软件,放到ogg的安装目录,并解压   mkdir /home/oracle/ogg unzip ogg112101_fbo_g ...

  3. 7.Java中的字符串

    1.String的特性 特性一:不可变性 String s=new String("yangyun") s=s.toUpperCase(); 这里的s,s占用的空间是不一样的(地址 ...

  4. 使用FP-Growth算法高效发现频繁项集【zz】

    FP树构造 FP Growth算法利用了巧妙的数据结构,大大降低了Aproir挖掘算法的代价,他不需要不断得生成候选项目队列和不断得扫描整个数据库进行比对.为了达到这样的效果,它采用了一种简洁的数据结 ...

  5. HTTP Keep-Alive模式

    1.什么是Keep-Alive模式? 我们知道HTTP协议采用"请求-应答"模式, 当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成 ...

  6. js添加var和不加var区别

    var 声明的变量,作用域是当前 function 没有声明的变量,直接赋值的话, 会自动创建变量 但作用域是全局的. //----------------- function doSth() { a ...

  7. node.js安装

    Node.js是一个基于Chrome JavaScript运行时建立的一个平台,用来方便地搭建快速的,易于扩展的网络应用Node.js借助事件驱动,非阻塞I/O模型变得轻量和高效,非常适合run ac ...

  8. win7 eclipse 调试storm

    windows 下eclipse开发storm 用本地模式,直接run as 运行topology解决了可以什么都不用下,直接把storm-starter的源码下下来,1.在eclipse创建一个ja ...

  9. Leetcode Valid Sudoku

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  10. 洛谷 P1736 创意吃鱼法 Label:dp || 前缀和

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...