div实现背景图片拉伸
2013-06-18 12:50
357 查看
div背景图片拉伸/article/5809102.html
背景图片可以设置重复（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>
背景图片可以设置重复（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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3实现一个div设置多张背景图片及background-image属性
- 用滤镜实现背景图片的拉伸
- css3实现一个div设置多张背景图片及background-image属性
- 让div背景图片自动拉伸,而不是平铺！超简单！
- DIV背景图片随DIV高度宽度变化而自动拉伸
- jquery 实现背景图片循环切换，显示隐藏div
- QT label样式表实现背景图片自动拉伸缩小（充满整个Label）
- body背景图片拉伸另类实现
- div背景图片拉伸
- 如何实现UIButton的背景图片拉伸
- css实现背景图片拉伸
- css 实现背景图片拉伸
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）
- div+css无图片实现带背景圆角框
- CSS常用效果实现004——控制div的背景图片的长宽
- HTML背景图片拉伸铺满 CSS实现
- 怎样实现表格背景图片的拉伸效果
- 页面背景图片的拉伸实现代码
- 怎样才能实现表格背景图片拉伸
- div+css无图片实现不带背景圆角框