div背景圖片拉伸


背景圖片可以設置重復(repeat)不重復(no-repeat),但沒有設置拉伸屬性。

這里用偽背景實現了拉伸。所謂偽背景,就是用兩個重疊的div,下面一個放圖片填滿div,當成背景。

<html>
<head>
    <style>
        #back {                
            width: 200px;
            height: 200px;    
        }    
        #back img {
            vertical-align:top;     /*解決ie瀏覽器背景填充時的空隙*/
            width: 100%;
            height: 100%;
        }
        /*用相對布局讓兩個div重疊*/
        #front {    
            background: transparent; /*前面div透明背景*/
            position: relative;
            width: 200px;
            height:200px;
            top: -200px;
        }    
    </style>
</head>
    <body>
        <div id="back">
            <img src="http://static.cnblogs.com/images/logo_small.gif"/>
        </div>
        <div id="front">
            <img src="http://static.cnblogs.com/images/logo_small.gif"/>
            <a href="http://www.baidu.com">百度</a>
        </div>
    </body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM