在 IE8 下显示拉伸背景
- 前端笔记
- 2018-07-13
- 146热度
- 0评论
一、Filter
正常情况下,通过 background-size: 100% 100% 来实现背景图片拉伸效果。但是这个属性在 IE8 下不管用。所以要用 filter 来实现这个效果。测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Filter</title>
<style type="text/css" media="screen">
.container {
background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg') fixed no-repeat;
background-size: 100% 100%;
width: 100%;
height: 500px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg',sizingMethod='scale');
}
</style>
</head>
<body>
<div class="container">
<a href="http://www.baidu.com" target="_blank">baidu</a>
</div>
</body>
</html>
二、image 标签
发现一个问题,滤镜会遮挡内部元素。上面那个例子中,在 IE8 下无法点击超链接。为了解决这个问题,我们使用 image 标签来做背景。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Filter</title>
<style type="text/css" media="screen">
.container {
width: 100%;
height: 500px;
}
.container > image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg'></image>
<a href="http://www.baidu.com" target="_blank">baidu</a>
</div>
</body>
</html>