做一个404页面遇到的问题?

代码少反而没有头绪,
我的想法是把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;
}
阅读 4.1k
4 个回答

error定宽定高,保证图片不变形。

外层容器宽100%,居中你的error

背景颜色做背景,然后那个404和哭的表情切成一个图片。然后把图片和文字看成一个整体,然后垂直左右居中。

取最边上的做背景颜色,超出部分会以纯色颜色显示;
参考:background:#ccc url(xxx.jpg) no-repeat top center;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题