Question

我有一个推车抽屉，点击右侧打开。我希望它外面的一切都变得更暗，当它打开时，只有div（推车抽屉）聚焦。有关如何做到这一点的任何提示？

Answer 1

基本上，hudge shadow可能会这样做：（点击任何编号的div来使周围的内容变暗）

从您的评论

编辑，我建议：.cart-container{box-shadow:0 0 0 2000px rgba(0,0,0,0.5);}演示以下效果。

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>

Answer 2

您可以使用伪元素...

＆＃13;

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;
}

＆＃13;

<div>div</div>

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

使用伪元素，你可以这样做。将固定元素亲属定位到视口，它将覆盖整个页面，并进行一些小的调整。

<强> jsFiddle

1. Create a new LaunchImage and drop any file onto each box
2. Build it , it will fail or have some warnings
3. Click on the "Show Report navigator" and you'll see the sizes/names for each
4. On your image editor resize the image to the proper sizes/names and overwrite to
the respective file as reported in 3. each file is on 
<proj dir>/Assets.xcassets/LaunchImage.launchImage

$('.cart-toggle').click(function() {
  $('.cart-container').toggleClass('cart-open');
});

.cart {
  position: fixed;
  top: 0;
  right: 0;
  width: 270px;
  height: 100%;
  transform: translateX(100%);
  background: silver;
  transition: transform .4s ease;
}
.cart-open .cart {
  transform: translateX(0);
}
.cart-open:before {
  content: "";
  position: fixed;
  background: rgba(0, 0, 0, .85);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.cart-toggle {
  position: relative;
}

我怎样才能让一切都变得更黑暗？

3 个答案: