我尝试使用jQuery脚本来改变body的background-image中的透明度（不透明度），但是他改变了body元素内部的所有内容。
这是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive and faded Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="">
<meta name="description" content="">
<link href="http://fonts.googleapis.com/css?family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="responsive-full-background-image.css">
</head>
<body>
<div id="scroll-pos"></div>
<header>
<svg><path d="M62.146,49.999L92.364,19.78c1.159-1.159,1.159-3.037,0-4.195l-7.95-7.95c-1.158-1.158-3.036-1.158-4.195,0L50,37.854 L19.781,7.635c-1.158-1.158-3.037-1.158-4.196,0l-7.95,7.95c-1.159,1.158-1.159,3.036,0,4.195l30.219,30.219L7.636,80.219 c-1.16,1.159-1.16,3.037,0,4.195l7.949,7.95c1.159,1.159,3.038,1.159,4.196,0L50,62.146l30.218,30.218 c1.159,1.159,3.037,1.159,4.195,0l7.95-7.95c1.159-1.158,1.159-3.036,0-4.195L62.146,49.999z"></path></svg>
</header>
<main>
<article>
<h1>Odd Future street art hoodie readymade.</h1>
<p>Ethical pug hella church-key forage seitan, cred American Apparel typewriter Tumblr fap fixie. Etsy synth meh raw denim lomo seitan. Thundercats kale chips swag, aesthetic Pitchfork readymade flannel slow-carb Cosby sweater authentic food truck.</p>
</article>
</main>
<main>
<article>
<h1>High Life Bushwick hoodie occupy letterpress direct trade +1.</h1>
<p>Raw denim leggings Shoreditch freegan, banh mi Echo Park Wes Anderson brunch sartorial. Blue Bottle Schlitz pour-over direct trade irony, literally gastropub next level mustache Cosby sweater tote bag viral locavore.</p>
</article>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var fromtop = $(document).scrollTop();
$('body').css({opacity: 1 - fromtop / ($(window).height() + 500)});
});
</script>
</html>
和css文件
body {
background-color: #222;
color: white;
font-family: Merriweather;
font-size: 0.9em;
line-height: 1.8em;
margin: 0;
}
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
transform: translatez(0);
}
header {
overflow: hidden;
height: 50%;
width: 100%;
}
html, body {
height: 100%;
}
header, main {
padding: 30px;
}
h1 {
color: white;
}
svg {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
}
path {
fill: white;
opacity: 0.7;
}
main {
display: table;
height: 70%;
width: 100%;
}
article {
display: table-cell;
position: relative;
vertical-align: middle;
}
h1, p {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* For mobile devices */
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}
我究竟做错了什么？
第一：最好创建一个div（带背景）来包装所有内容，以防止使用body标签出错
第二：你可以简单地使用背景语法
背景：颜色位置/大小重复原点剪辑附件图像| initial | inherit;
background: url(images/background-photo.jpg) center no-repeat fixed;
然后，你可以在这里找到问题的答案：qazxsw poi