请问这种背景黑框固定的效果如何实现的？是css还是js_html/css

请问这种背景黑框固定的效果如何实现的？是css还是js_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:22:04

Original

1136 people have browsed it

http://mindhacks.com/

需用电脑访问，手机看不到效果，请问这种背景黑框固定的效果如何实现的？不管右侧浏览器滚动条如何滚动，黑色背景边框都不变，我研究了半天没想明白，是css还是js？请大神指导！

回复讨论(解决方案)

通过CSS实现的，手机看不到效果的原因是响应式页面

原理如下：
设置body的背景色为#1a1a1a 深灰，这样左右的黑框就有了
然后通过伪类选择器:before & :after实现上下的黑框，定位设置为fixed相对浏览器窗口定位，设置一定的高度，这样上下的黑框也有了

你试试下面简化的样式就明白了

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>body:before {		background: inherit;		content: "";		display: block;		height: 21px;		left: 0;		top:0;		position: fixed;		width: 100%;		z-index: 99;}body:after {		background: inherit;		content: "";		display: block;		height: 21px;		left: 0;		bottom:0;		position: fixed;		width: 100%;		z-index: 99;}body {		background:#1a1a1a;}#div1 {	margin:21px;	background:#fff;	max-width:1320px;}</style></head><body><div id="div1">    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div></div></body></html>

Copy after login

非常感谢呀，以前没用过before和after，多谢，请问这两个是不是都是CSS的标签，需要浏览器支持？

<!doctype html><html lang="en"><head>	<meta charset="UTF-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	<title> 页面名称 </title><style type="text/css">body {	border: 20px solid rgb(25,25,25);	padding: 0px;	margin: 0px;}body:before {	content: "";	background-color: rgb(25,25,25);	position: fixed;	left: 0;	top: 0;	width: 100%;	height: 20px;}body:after {	content: "";	background-color: rgb(25,25,25);	position: fixed;	left: 0;	bottom: 0;	width: 100%;	height: 20px;}#div {	width: 100%;	height: 2000px;}</style></head><body><div id="div"></div></body></html>

Copy after login