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>

查看全文

相关阅读:
Mysql查看所有表的数据量
 Mysql存储过程查询数据插入别的表里。
MYSQL查看最大连接数和修改最大连接数
 Centos7 安装字体库&中文字体
 docker-部署elk-6.1.3
confluence输入数学公式之mathjax
elasticsearch安装ansj分词器
 mongorestore 一次踩雷
 let‘s encrypt之nginx-https没有小锁
 微服务预想

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