body {

               width: 600px;

               height: 500px;

               border: 10px solid #789;

               margin: 10px 100px;

               padding: 40px;

               background: pink url("/images/shanghai_lupu_bridge.jpg") no-repeat;

               /*background: url("/images/eg_tulip.jpg") no-repeat;

               background-origin: content-box;

               background-position: right;*/

          　　　background-position: center;

            }

body里设置background-image后，body的宽和高无法约束image的位置；

但其他标签可以约束image的位置，如下：

.zhujieshao {

                width: 100px;

                height: 140px;

                padding: 20px;

                border: 6px solid #18E;

                background: url("/images/shanghai_lupu_bridge.jpg") no-repeat;

                background-position: left bottom;

                background-origin: content-box;

                float: left;

            }

完整代码：

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <style type="text/css">

            body {

               width: 600px;

               height: 500px;

               border: 10px solid #789;

               margin: 10px 100px;

               padding: 40px;

               background: pink url("/images/shanghai_lupu_bridge.jpg") no-repeat;

               /*background: url("/images/eg_tulip.jpg") no-repeat;

               background-origin: content-box;

               background-position: right;*/

               background-position: center;

       　　　}

            #header {

              border: 1px solid #14C;

              width: 550px;

              height: 450px;

              margin: 0 auto; background: url("/images/eg_tulip.jpg") no-repeat;

　　　　　　　}

            .zhujieshao {

                width: 100px;

                height: 140px;

                padding: 20px;

                border: 6px solid #18E;

                background: url("/images/shanghai_lupu_bridge.jpg") no-repeat;

                background-position: left bottom;

                background-origin: content-box;

                float: left;

            }

        </style>

    </head>

    <body id="er">

        <div id="header">

            <div class="zhujieshao" id="content1"></div>

            <div class="zhujieshao" id="content2"></div>

            <div class="zhujieshao" id="content3"></div>

            <div class="zhujieshao" id="content4"></div>

            <div class="zhujieshao" id="content5"></div>

            <div class="zhujieshao" id="content6"></div>

        </div>

    </body>

</html>

background-image小解的更多相关文章

  1. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  2. css样式之background详解（格子效果）

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  3. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  4. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  5. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  6. Android什么时候进行View中Background的加载

    对大多数Android的开发者来说,最经常的操作莫过于对界面进行布局,View中背景图片的加载是最经常做的.但是我们很少关注这个过程,这篇文章主要解析view中背景图片加载的流程.了解view中背景图 ...

  7. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  8. PopupWindow 点击外部和返回键无法消失背后的真相（setBackgroundDrawable(Drawable background)）

    刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在 ...

  9. CSS背景background详解，background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  10. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

随机推荐

  1. github page

    使用github page 可以查看仓库中保存的网页的事例 新建gh-pages的分支,然后点击上方的page按钮即可配置相应的链接以及地址 注:默认情况下显示的是当前文件下的index.html文件 ...

  2. EXCEL处理大量数据的潜在风险

    同事收到几份60几M的xls文件,电脑性能不够,发给我来处理. 处理发现有BUG.简单的vlookup,如果只是实验性的处理几个数据的话,发现没有问题,但批量对全部数据进行处理,就会出现#N/A的问题 ...

  3. linux shell trap的使用

    原文地址:http://blog.sina.com.cn/s/blog_62eb16bb01014dbh.html 一. trap捕捉到信号之后,可以有三种反应方式: (1)执行一段程序来处理这一信号 ...

  4. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  5. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  6. weblogic的下载安装及myeclipse的配置

    weblogic的下载可以参考:http://jingyan.baidu.com/article/c910274b94e179cd371d2d7c.html 安装及myeclipse的配置参考:htt ...

  7. 对比SerialCommunication和微软的SerialPort，向SerialPort看齐

    SerialCommunication是我综合网上看到的代码稍作修改而成的串口通信类,而SerialPort则是C#的System类库的IO目录Ports子目录下的串口通信类.SerialCommun ...

  8. ext3是对ext2文件系统的一个扩展高性能日志文件系统

    嵌入式开发者所做的最重要的决定之一就是部署哪种文件系统.有些文件系统性能比较高有些文件系统空间利用率比较高,还有一些文件系统设备故障或者意外断电后恢复数据比较方便. linux文件系统概念 分区 分区 ...

  9. 引用dll动态库，动态库中弹出对话框输入，将输入参数，作为变量继续调用。

    在做支付项目时,引用动态库,动态库弹出支付宝或者微信的支付码,继而接收.最终将结果返回给调用动态库方法. 首先,动态库接收的是一个string 类型的xml,如 public string Pay(s ...

  10. PARALLEL PROCESSING

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION