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

时间：2018-01-10 10:03:42

标签： jquery css effects

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

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

输出应该是这样的 - ＆gt; enter image description here 

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

和 - ＆gt; 

$(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,
            });


    });


}

3 个答案:

答案 0 :(得分：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();

就是这样！

这是其工作的一小段。向下滚动并运行它，以了解其工作原理！

使背景变暗-摘要

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（希望背景变暗）的功能，这可能对某些人有用。例如，这是另一个片段：

背景可变变暗-另一个片段

// 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>

答案 1 :(得分：1)

当body使用.focus()进行重点关注时，您可以向input添加课程。

使用.focusout()失去焦点时删除该类。

简单的例子......

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

$('#js-search').focusout(function() {
  $('body').removeClass('is-dimmed');
})
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

非 jQuery 答案：

将此 CSS 应用到您的元素

box-shadow: 0 0 0 1000px rgba(0, 0, 0, .3);
相关问题
最新问题