除了一个元素，如何使背景变暗？答案

【问题标题】：How to darken background except of one element?除了一个元素，如何使背景变暗？
【发布时间】：2018-01-10 10:03:41
【问题描述】：

除div .search-bar 一个元素外，如何使整个主体变暗。在我的情况下，它只会在点击时变暗，之后什么也不做！

但我的目标是专注于点击，如果它被点击到任何其他深色区域

这就是输出的样子 ->

<div class="search-bar">
    <input type="text" class="search-btn" placeholder="Поиск по ключевым словам">
</div>

还有->

$(function () {

    darkenColor();

});

var darkenColor = function ($color) {

    var $color = $('.search-bar');

    $color.click(function () {


        $(function () {
            var docHeight = $(document).height();
            $('body').append("<div id='overlay'></div>");
            $('#overlay')
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });
            });
            $(this).css({
                'background' : '#fff',
                'position' : 'relative',
                'z-index' : 5700,
            });


    });


}

【问题讨论】：

标签： jquery css effects

【解决方案1】：

非 jQuery 答案：

将此 CSS 应用于您的元素

box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);

【讨论】：

这是一个非常简单的解决方案。它应该算作这个问题的答案。我之前以多种方式完成了屏幕调光，但您的解决方案最重要！为了使解决方案适用于所有屏幕尺寸，我唯一要添加的就是这样做： box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);
@ZanCoul 很棒的建议！更新

【解决方案2】：

已经有一段时间了，但另一种方法是使用jquery-dim-background。

您所做的就是在您的 jQuery 之后加载此脚本：

<script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>

然后，假设您只想专注于特定元素，而您希望其余部分变暗/变暗。你这样做：

$('#theElementYouWantFocused').dimBackground();

接下来发生的一切都取决于您。然后，每当您想使事情恢复正常时，您都可以这样做：

$.undim();

就是这样！

这是它的工作原理。向下滚动并运行它，您就可以看到它是如何工作的！

调暗背景 - sn-p

html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
}

#actionBox:hover {
  box-shadow: 0 0 8pt #111;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}

<!DOCTYPE html>
<html>

<head>
  <title>Basic element dimming demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#actionBox')
        .mouseenter(function() {
          $(this).dimBackground();
        })
        .mouseleave(function() {
          $(this).undim(); // Note: We could also use `$.undim();`
        });
    });
  </script>
</head>

<body>
  <h1>Basic Demo</h1>
  <div class="info">
    <p>
      <b>Move your mouse cursor over Box #5 and see how anything else on
                this page becomes dimmed.</b>
    </p>

  </div>
  <div class="boxes">
    <div class="box">
      <h2>Box #1</h2>
    </div>
    <div class="box">
      <h2>Box #2</h2>
    </div>
    <div class="box">
      <h2>Box #3</h2>
    </div>
    <div class="box">
      <h2>Box #4</h2>
    </div>

    <div class="box" id="actionBox">
      <h2>Box #5</h2>
      <p>
        Hover me!
      </p>
    </div>

    <div class="box">
      <h2>Box #6</h2>
    </div>

    <div class="box">
      <h2>Box #7</h2>
    </div>
    <div class="box">
      <h2>Box #8</h2>
    </div>
    <div class="box">
      <h2>Box #9</h2>
    </div>
  </div>
</body>

</html>

更新

这里是官方基本演示的链接：jQuery Dim Background Demo
这里是这个包的 GitHub 文档的链接：GitHub - jQuery Dim Background
如果您阅读文档，您还可以找到一个可以修改darkness（您希望背景有多暗）的内容，这可能对你们中的某些人有用。比如这里是另一个sn-p：

背景的可变调光 - 另一个 sn-p

// Note -> 0: no dimming, 1: completely black

function dimNothing() {
  $('#dim-nothing').dimBackground({darkness : 0});
}

function dimABit() {
  $('#dim-a-bit').dimBackground({darkness : 0.1});
}

function dimMedium() {
  $('#dim-medium').dimBackground({darkness : 0.5});
}

function dimATon() {
  $('#dim-a-ton').dimBackground({darkness : 0.9});
}

function dimPitchBlack() {
  $('#dim-pitch-black').dimBackground({darkness : 1});
}

$(document).ready(() => {
  $('#dim-nothing').mouseenter(() => dimNothing()).mouseleave(() => $.undim());
  $('#dim-a-bit').mouseenter(() => dimABit()).mouseleave(() => $.undim());
  $('#dim-medium').mouseenter(() => dimMedium()).mouseleave(() => $.undim());
  $('#dim-a-ton').mouseenter(() => dimATon()).mouseleave(() => $.undim());
  $('#dim-pitch-black').mouseenter(() => dimPitchBlack()).mouseleave(() => $.undim());
});

html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
  color: black;
}

.hightlight:hover {
  box-shadow: 0 0 8pt #FFF;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  </head>
  <body>
    <div class="info">
      <h1>Example Demo with variable dimming</h1>
      <p>
        <b>Hover over the boxes to see different levels of dimming!</b>
      </p>
      <div class="boxes">
        <div class="box hightlight" id="dim-nothing">
          <h2>Box #1</h2>
          <p>
            I will actually not dim anything.
          </p>
        </div>
        <div class="box hightlight" id="dim-a-bit">
          <h2>Box #2</h2>
          <p>
            I will dim the screen just a bit!
          </p>
        </div>
        <div class="box hightlight" id="dim-medium">
          <h2>Box #3</h2>
          <p>
            I will dim the screen!
          </p>
        </div>
        <div class="box hightlight" id="dim-a-ton">
          <h2>Box #4</h2>
          <p>
            I will dim the screen a ton!
          </p>
        </div>
        <div class="box hightlight" id="dim-pitch-black">
          <h2>Box #5</h2>
          <p>
            I will dim the screen <b>PITCH BLACK!</b>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

当input 具有焦点时，您可以使用.focus() 向body 添加一个类。

当它失去焦点时删除该类.focusout()。

简单的例子...

$('#js-search').focus(function() {
  $('body').addClass('is-dimmed');
})

$('#js-search').focusout(function() {
  $('body').removeClass('is-dimmed');
})

body {
  background: url(https://unsplash.it/1000)
}

.search {
  background: white;
  height: 100px;
  display: flex;
}

.search input {
  width: 100%;
  font-size: 3em;
  z-index: 1;
}

.is-dimmed:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input type="search" id="js-search">
</div>

【讨论】：

非常感谢，但是如果不点击输入，我怎样才能做到这一点不会使整个身体变暗？
对不起，我不明白。你能再解释一下吗？