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>

查看全文

相关阅读:
消息中间件(八)-----RabbitMQ延迟队列
 消息中间件(七)-----RabbitMQ死信队列
 通过过滤器、拦截器实现公共验证签名以及时间戳功能
 消息中间件(五)-----AMQP概论、rabbitMQ入门
 消息中间件(四)-----activemq集群
 消息中间件(三)-----限时订单的实现(delayQueue、mq)
消息中间件(二)-----ActiveMQ高级特性和用法
 面试题：如何实现红包算法
 LRU算法与代码实现
 面试题：寻找缺失的整数

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