zoukankan html css js c++ java

background-image小解

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>

查看全文

相关阅读:
在线程中进行读取并写入文件和wenjia
Java里的IO流里的FileInputStream 的读取并在前打印行数！
C++基础知识（前言）
linux shell 笔记
 AngularJS图片上传功能的实现
 jQuery中事件绑定
 项目实践中--Git服务器的搭建与使用指南
 javascript跨浏览器事件对象类库
 完美运动框架(js)
浅谈js中继承的理解和实现

原文地址：https://www.cnblogs.com/ouyangfeifei/p/5995079.html