如何使 div 之外的所有内容变暗？

Posted 2023-03-05

【中文标题】如何使 div 之外的所有内容变暗？

【英文标题】：How can I make everything outside of a div darker?

【发布时间】：2017-06-13 15:44:53

【问题描述】：

我有一个购物车抽屉，点击后会从右侧打开。我希望它之外的所有东西在打开时都变得更暗，这样只有 div （购物车抽屉）被聚焦。关于如何做到这一点的任何提示？

【问题讨论】：

任何 html 和 css 来展示你迄今为止尝试过的基本示例？

你的 sn-p 没有多大帮助，你的一段 HTML 会比脚本更有效。

对不起，我的意思是 :% if cart.item_count > 0 % 例如没有帮助，一个普通的 HTML 示例就足以显示您的结构以及哪个元素应该是轻的...

【参考方案1】：

基本上，shadow 可能会这样做：（单击任何编号的 div 以使其周围变暗）

编辑您的评论，我建议：.cart-containerbox-shadow:0 0 0 2000px rgba(0,0,0,0.5); demo 下面的效果。

div:focus 
  position:relative;/* bring on top;*/
  box-shadow:0 0 0 1600px rgba(0,0,0,0.65);/* dark around it */


/* demo purpose*/
body 
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;

div 
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;

div:nth-child(odd) 
  background: tomato;

div:not(:first-of-type):before 
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;

<div>tabindex for demo catches click, but not me. <b>switch light back on</b></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>

固定位置的掩码也可用于捕捉其外部的任何点击：

div.toShowTop 
  position: relative;
  z-index: 1;
  /* bring on top;*/
  box-shadow: 0 0 0 1600px rgba(0, 0, 0, 0.65);
  /* dark around it */

div.toShowTop ~.mask 
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50px;/* to see effect */
  background: rgba(0, 0, 0, 0.5);

body div.toShowTop 
  background: yellow;
  order: 1;

div:nth-child(8)~div 
  order: 2

/* demo purpose*/

body 
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin: 0;

div 
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor: pointer;

div:nth-child(odd) 
  background: tomato;

div:not(:first-of-type):before 
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;

<div tabindex="0" class="toShowTop">div to show</div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<b class="mask"></b>
<!-- can be generated via js -->

你也可以使用另一个元素的伪元素来避免额外的标记：

div.toShowTop 
  position:relative;
  z-index:1;/* bring on top;*/

div.toShowTop  + div:after 
  content:'';
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:50px;
  background:rgba(0,0,0,0.75);
  cursor:auto;

body div.toShowTop 
  background:yellow;
  order:1;
div:nth-child(8)~div order:2
/* demo purpose*/
body 
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;

div 
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor:pointer;
  

div:nth-child(odd) 
  background: tomato;

div:not(:first-of-type):before 
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;

<div tabindex="0" class="toShowTop"> div to show </div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>

【讨论】：

@CRover 为此，您需要使用另一个元素，添加 2 个 sn-ps 以显示想法

【参考方案2】：

你可以用一个伪元素来做......

div 
  background: #fff;


div:after 
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  content: '';
  z-index: -1;

<div>div</div>

但更好的解决方案可能是创建一个单独的元素作为背景/蒙版。这将使您能够更好地控制布局。

section 
  background: white;


.mask 
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1;


.show 
  position: relative;
  z-index: 2;

<section>section</section>

<section class="show">show this</section>

<section>section</section>

<div class="mask"></div>