过去两天我一直在寻找解决这个问题的方法。我让某些部分可以工作，但其他部分停止工作...我使用 bootstrap (尽管仅使用容器类)，并且对 Javascript、jQuery 非常陌生。
这就是我正在尝试做的事情: 我有一个带有背景图像的 div。现在，我只想使单击时的背景图像变暗，而不是文本(这样它变得更易读)。我想用第二个 div 来做到这一点，它具有黑色背景颜色和 50% 不透明度，并覆盖整个背景。我想将 Javascript 或 jQuery 保持在最低限度，这样我只需要在每个图像顶部放置一个带有“darken”类的 div，可以通过单击它来打开和关闭该图像(默认应该关闭，或者不可见) )。
我真的迷路了。它与 z-index 有关系吗？或者也许是职位？
(也是一个可以工作的 JSfiddle，并且有点像我想要的那样，但仅在 jQuery 1.8.3 中。我不知道为什么；http://jsfiddle.net/5AJ6m/9/ )
请参阅下面的代码: (JSfiddle 为你们提供我的代码和随机图像 http://jsfiddle.net/N4eCr/159/ )
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="darken.js"></script>
</head>
<body>
<!--http://jsfiddle.net/N4eCr/136/-->
<!--http://jsfiddle.net/N4eCr/135/-->
<div id="entry_10-06-2014">
<div class="container">
<h1>Impressions and other stuff
</h1>
<h2>taken from my awesomely weird life
</h2>
<h3><em>10th</em> of June, 2014 - <em>Brooklyn</em>, NYC
</h3>
<div class="seperator">
<img src="Design/Seperator_01.svg">
</div>
<p>Random projections have recently emerged as a powerful method for dimensionality reduction. Theoretical results indicate not much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis magna eu ultricies laoreet? Pellentesque tempus ornare nisi; quis dictum tortor dapibus id. Aliquam malesuada odio vitae ipsum cursusLorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="darken"></div>
</div>
<div id="entry_11-06-2014">
<div class="container">
<h1>Impressions and other stuff
</h1>
<h2>taken from my awesomely weird life
</h2>
<h3><em>10th</em> of June, 2014 - <em>Brooklyn</em>, NYC
</h3>
<div class="seperator">
<img src="Design/Seperator_01.svg">
</div>
<p>Random projections have recently emerged as a powerful method for dimensionality reduction. Theoretical results indicate not much.</p>
</div>
<div class="darken"></div>
</div>
</body>
CSS:
@font-face {
font-family: 'brandontext-black';
src: local('BrandonText-Black.otf'), url('/Fonts/BrandonText-Black.otf') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'brandontext-light';
src: local('BrandonText-Light.otf'), url('/Fonts/BrandonText-Light.otf') format('opentype');
font-weight: 100;
font-style: normal;
}
body {
font-family: 'BrandonText-Black', sans-serif;
font-style: normal;
color: white;
text-shadow: 0px 0px 40px #606060;
}
::selection {
color: white;
background: #454545;
}
h1 {
font-size: 81px;
text-align: center;
}
h2 {
font-size: 42px;
font-family: 'BrandonText-Light', sans-serif;
margin-top: -5px;
text-align: center;
}
h3 {
font-size: 24px;
font-family: 'BrandonText-Light', sans-serif;
text-align: center;
}
.seperator {
width: auto;
height: auto;
}
.seperator img {
display: block;
margin: 0 auto;
margin-top: 40px;
}
p {
font-size: 42px;
font-family: 'BrandonText-Light', sans-serif;
line-height: 1.2em;
margin-top: 20px;
margin-bottom: 50px;
}
em {
font-family: 'BrandonText-Black', sans-serif;
font-style: normal;
}
.container {
padding: 40px;
z-index: 10;
position: relative;
}
.darken {
background-color: blue;
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
#entry_10-06-2014 {
position: relative;
background-image: url('Images/10-06-2014.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 700px;
z-index: 1;
}
#entry_11-06-2014 {
position: relative;
background-image: url('Images/11-06-2014.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 700px;
}
JS:
$('.darken').toggle(
function () {
$(this).css('background-color', 'blue');
},
function () {
$(this).css('background-color', 'red');
});
非常感谢您的帮助!
最佳答案
具体操作方法如下:
<script>
$(function() {
$("body > div").click(function() {
if($(this).hasClass('darken')) {
$(this).removeClass('darken');
}
else {
$(this).addClass('darken');
}
});
});
</script>
还有
<style>
.darken:before {
background: black;
content: "";
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
</style>
fiddle :http://jsfiddle.net/N4eCr/167/
关于javascript - 如何在点击时使响应式 div 的背景图像变暗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24283615/