css 背景与 页面元素相结合

代码

<div class="bgwrap">
  <div class="login_wrap">
    <div class="login_table">
     
    </div>
    <div class="login_list">
      <p align="right"><a href=" ">更多&gt;&gt;</a></p>
      <ul>
      
      </ul>
    </div>
    <div class="clear"></div>
    <div class="login_text_tip">
        <p><big>注册和登录提示：</big></p>
        <p>
        <big>1、</big><br>
        <big>2、</big> <br>
        <big>3、</big></p>
    </div>
  </div>
   
  <div class="clear_10"></div>
  <div class="copyright_mhy">版权所有</div>
</div>

注释：

最外层div css :   div class="bgwrap"

.bgwrap {
            background: url(../img/bg_02.png) center top no-repeat;
            height: 595px;
} 

center ： 表示背景图片随浏览器宽度改变时，保持图片中心显示在浏览器的中心

内容div css ： div class="login_wrap"

.login_wrap {
    width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    height: 310px;
} 

margin : auto 使页面宽度随浏览器改变时，整个div仍能居中

这2个属性的设置，确保了 内容div 中的元素 与 最外层div 的背景，随浏览器的宽度改变时，相一致。



效果图：

结合前：




结合后：




当然，输入框 input 的 css 要设置：

.login_wrap table td input.long_mhy {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin-left: 8px;
    background: none;
    border: none;
} 

    border: none :  不显示边框（边框使用背景）
   







参考更多：

http://nodebook.info/book/view?bid=53523a3c19980e913e9be3ee





--