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. CocoaPods安装和使用

    CocoaPods是iOS最常用的第三方类库管理工具,绝大部分有名的开源类库都支持CocoaPods. CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.幸运的是OS X系统默 ...

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

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

  3. 如何將ViewData裡包含的Html輸出(MVC)

    如何將ViewData裡包含的Html輸出(MVC) 默認輸入ViewData裡的Htm系統會自動把標籤轉換而達不到預覽的效果, 我們如果要呈現解析後的HTML則要調用@MvcHtmlString.C ...

  4. 如何在VS2012中使用IL Disassembler中查看项目编译生成的程序集

    2016-05-26 11:48:46 测试的WPF项目 MainWindow.xaml代码 MainWindow.xaml.cs 代码 在学习WPF的时候,想验证:删除MainWindow.xaml ...

  5. JVM中对象的创建过程

    JVM中对象的创建过程如以下流程图中所示: 对其主要步骤进行详细阐述: 为新生对象分配内存: 内存的分配方式: 指针碰撞:假设Java堆中内存是绝对规整的,所有用过的内存放在一边,空闲的内存在另一边, ...

  6. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

  7. phpcms无刷新分页

    控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...

  8. 第一章-第五题（你所在的学校有计算机科学专业和软件工程专业么？相关专业的教学计划和毕业出路有什么不同？阅读有关软件工程和计算机科学的区别的文章，谈谈你的看法。）--By 侯伟婷

    我所在的本科学校和研究生学校都有计算机科学专业和软件工程专业.具体的教学计划无从得到,所以此情况无从对比,但是我从本科教务处网站找到了计算机科学专业和软件工程专业有关专业方面的课程,现列表如下. 表格 ...

  9. Mybatis学习记录

    参考资料: <深入理解mybatis原理> MyBatis的架构设计以及实例分析

  10. Linux用过的命令

    -上传sudo -u b2b rz--创建文件夹sudo -u b2b mkdir--copysudo -u b2b cp /b2b/apache-tomcat-7.0.64/matt/DqN017S ...