在文本上淡化黑色覆盖答案

【问题标题】：Fade black overlay on text在文本上淡化黑色覆盖
【发布时间】：2017-11-14 03:38:07
【问题描述】：

我正在尝试在包含文本的 div 上创建透明覆盖。当通过按钮触发时，它应该动画开和关。通常，您可以在该 div 内创建一个具有绝对定位和全宽/高度的 div，使用缓动或动画 (Black transparent overlay on image) 更改不透明度。

但我希望能够选择 div 中的文本。从

更改覆盖

display: block

到

display: none

会打断淡入淡出的动画。如何从块淡化为无，以便我可以重新使用我的底层 div？

【问题讨论】：

欢迎来到 StackOverflow，您的问题应该包含 Minimal, Complete and Verifiable Example。另外，请澄清一下。 “重用我的底层div”是什么意思？如果你是从一个按钮触发动画，为什么需要使用display？为什么动画 opacity 不起作用？
您可以像您在问题中提到的那样走不透明的道路，只需添加指针事件：无；和指针事件：全部； css-tricks.com/almanac/properties/p/pointer-events

标签： css animation display

【解决方案1】：

您可以像您在问题中提到的那样走不透明的道路，只需添加pointer-events: none; 和pointer-events: all;。 pointer-events 属性告诉浏览器该元素应如何响应鼠标和触摸交互，如果将其设置为“无”，它只会让事件通过，就像该元素甚至不存在一样。更多信息：https://css-tricks.com/almanac/properties/p/pointer-events/

浏览器支持不错（除了iehttp://caniuse.com/#search=pointer-events

$('button').on('click', function(e) {
	e.preventDefault();
  $('.container').toggleClass('overlay-open');
})

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: black;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

.overlay-open .overlay {
  opacity: 1;
  pointer-events: all;
}

button {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle Overlay</button>
<div class="container">
  <div class="back">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam, illum sed dolorum quos modi, quibusdam cum tempora molestias laboriosam voluptas. Fuga corporis earum modi, aut nisi in molestias explicabo voluptatem iure distinctio tempora, iusto doloremque. Inventore culpa eligendi dolore. Expedita, officia, assumenda. Id magnam molestias saepe, cupiditate, architecto autem.
  </div>
  <div class="overlay"></div>
</div>

【讨论】：

【解决方案2】：

如果你可以使用 jQuery，这可能就是你要找的：

$(document).ready(function() {
  $("#popupbtn").click(function() {
    $(".overlay").fadeIn(1000);
    $(".overlay").css("display","block");
  });
  $("#close").click(function() {
    $(".overlay").fadeOut(1000);
    //$(".overlay").css("display","none");
  });
});

body,
html {
  margin: 0;
  padding: 0;
 }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: RGBa(0,0,0,0.5);
  display: none;
}
.popup {
  background: green;
  width: 200px;
  height: 200px;
  display: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="popupbtn">click me</button>
<div class="overlay">
  <div class="popup">
    <p>popup text</p>
    <button id="close">close</button>
  </div>
</div>

说明：$(".overlay").fadeIn(1000);完成后，display: block CSS就会进来。

希望这会有所帮助！

【讨论】：