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. Ubuntu16.04安装nginx

    //ubuntu //安装nginxcurl -LJO http://nginx.org/download/nginx-1.10.1.tar.gz tar zxvf nginx-1.10.1.tar. ...

  2. java -- getOutputStream() has already been called for

    原文:https://my.oschina.net/zhongwenhao/blog/209653 原因:既调用了response.getOutputStream(),又调用了response.get ...

  3. C语言中字符串结束符'\0'

    转自:http://www.cnblogs.com/kaituorensheng/archive/2013/12/09/3464462.html 本质 '\0'就是8位的00000000,因为字符类型 ...

  4. /var/run/yum.pid 已被锁定，PID 为 XXXX 的另一个程序正在运行。

    安装st-load时, 终端提示 “/var/run/yum.pid 已被锁定,PID 为 13908 的另一个程序正在运行.” 解决方法:直接在终端运行 rm -f /var/run/yum.pid ...

  5. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  6. CentOS两台服务器利用scp拷贝文件

    yum install -y openssh-clients scp -r -P 26611 /usr/local/ssdb-20160518/ root@10.10.6.199:/usr/local ...

  7. 【Oracle】Oracle 序列步长问题

    问题: 数据库中客户表的ID 变化为 21\31\41 有序数字,而不是1\2\3 依次增长 [问题原因]: SEQ_CUSTOMNOTEEN 设置了缓存20,每次取20个数,然后一个一个给你,如果中 ...

  8. web前端~~浏览器兼容问题（百度）

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  9. Python In Action:二、 最小的GUI程序：麻雀虽小，五脏俱全

    Python in Action第二个例子,倒是很简单,却是最基本的GUI程序框架,里面有最基本的实现GUI流程 import wx class MyApp(wx.App): def OnInit(s ...

  10. *HDU3357 判环

    Stock Chase Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...