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>

查看全文

相关阅读:
JS函数调用的方法
 JS 正则表达式
 JS replace()方法-字符串首字母大写
 JS案例之3——倒计时
 JS案例之2——cycle元素轮播
 jsp自定义标签
 每日记载内容总结23
maven项目部分知识
 eclipse中整合springMvc，velocity和sitemesh
eclipse中整合springMvc和velocity

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