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>
原文地址:https://www.cnblogs.com/ljmin/p/2592312.html