个人中心
gpt4 book ai didi

javascript - 如何在点击时使响应式 div 的背景图像变暗？

转载 作者：行者123 更新时间：2023-11-27 23:55:28 26 4
gpt4 key购买 nike

过去两天我一直在寻找解决这个确切问题的方法。我的某些部分可以工作，但其他部分停止工作...我使用 Bootstrap (虽然只有容器类)，并且对 Javascript、jQuery 还很陌生。

这是我正在尝试做的事情:我有一个带有背景图片的 div。现在，我只想使单击时的背景图像变暗，而不是文本(这样它变得更具可读性)。我想用具有黑色背景颜色和 50% 不透明度并覆盖整个背景的第二个 div 来执行此操作。我想将 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/

26 4 0
文章推荐： javascript - 在 SVG 变换比例上使用 CSS 过渡
文章推荐： c++ - 为什么我的程序在 while 循环后退出？
文章推荐： c++ - NotImplementedException C++
文章推荐： html - SVG 作为 div 背景
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com