在文本上淡出黑色覆盖

我试图在包含文本的div上创建透明覆盖。通过按钮触发时，它应该开启和关闭动画。通常情况下，您可以在该div内创建一个具有绝对定位和全宽/高度的div，使用轻松或动画更改不透明度（Black transparent overlay on image）。在文本上淡出黑色覆盖

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

display: block

更改叠加

display: none

将打破褪色动画。我该如何淡入淡出，所以我可以重新使用我的底下div？

来源

2017-06-12 Cake

欢迎来到StackOverflow，你的问题应该包含一个[**最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve）。另外，请澄清一下。 _“重新使用我的底层div”是什么意思？_如果你从一个按钮触发动画，为什么你需要使用'display'？为什么不动画“不透明”工作？ – hungerstar

你可以像你在你的问题中提到的不透明的道路，只是添加指针事件：无;和指针事件：所有; https://css-tricks.com/almanac/properties/p/pointer-events/ –

如果你可以使用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会在

希望这有助于！

来源

2017-06-12 15:42:39 Chesswithsean

是的。这解决了它，谢谢！ – Cake

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

的浏览器支持是体面的（除即< 10，但在GitHub上的一个填充工具的地方）http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) { 
 
\t 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>

来源

2017-06-12 15:33:01

在文本上淡出黑色覆盖

回答

相关问题