首页 > 代码库 > background-image小解

background-image小解

2024-08-17 17:05:39   222人阅读

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小解


联系
我们