特定元素上的引导模式背景 CSS

Question

当一个引导模型打开时：背景看起来更暗as shown here。我希望能够将该阴影效果的 CSS 类应用到 特定元素。

我不希望涉及任何 javascript，因为不涉及任何行为。我只想要样式。

我确实尝试了this question 中显示的解决方案，但它对我不起作用。

仅仅改变不透明度不是我想要的。不透明样式只是将所有内容都洗掉，而引导模式则为所有内容添加了阴影。

Answer 1

您当然也可以对任何元素执行此操作。你只需要一个带有半透明背景的元素周围的 div。这是一个工作小提琴：https://jsfiddle.net/fjhgtq0b/

概念：我这样做的方式是，我总是有一个包装 div 围绕我想要一个阴暗背景的元素/元素。我将该 div 的背景设置为黑色（或我想要的任何颜色）并设置不透明度。这不会使元素本身透明。

html :（假设我的元素是一个输入文本框）

<div id="backgroundDiv">
<input/>
</div>

css：

#backgroundDiv{
position:relative;
background-color:rgba(0, 0, 0, 0.5);
}

我在背景上放了一张图片，这样你就可以看到背景 div 的阴影。 rgba (0,0,0,0.5) 将背景设置为黑色（0,0,0 是黑色的代码），不透明度设置为 0.5。