我有一个购物车抽屉,在单击时从右侧打开。当它打开时,我希望它外部的所有内容变暗,以便仅聚焦于该div(购物车抽屉)。您对如何实现此目标有什么建议吗?
基本上,一个巨大的阴影
可能会做到:(单击任何编号的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>
你可以使用伪元素来实现...
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>
{% if cart.item_count > 0 %}
并不是很有帮助,一个简单的HTML示例就足以展示你的结构以及哪个元素应该是轻量级的... - G-Cyrillus