代码少反而没有头绪,
我的想法是把error绝对定位,但有一个问题,如果是大屏幕的话,定位的距离就不一样?
大屏幕下也会造成背景图的拉伸,不知该怎么解决?
<body class="error_body">
<div class="error">
<p class="error_01">SOORY您访问的页面弄丢了</p>
<p class="error_02">您可以通过以下方式继续访问……</p>
</div>
</body>
我是这样写的,把文字以外的所有图层保存(就是一张大图片)做背景,
样式这样写的。但是出现了一个问题在在IE8及其一下会出现背景图无法显示的情况?
.error_body{
height: 100%;
background:url(../images/404.png) no-repeat fixed center center / cover ;
position: relative;
}
.error{
position: absolute;
width: 400px;
height: 100px;
top:55%;
left:50%;
margin-left:-200px;
text-align: center;
}
.error_01{
font-size: 31px;
color: #4ab8f7;
margin: 0;
}
.error_02{
font-size: 20px;
color: #4ab8f7;
margin: 0;
}
error定宽定高,保证图片不变形。
外层容器宽
100%
,居中你的error