我有一个聚光灯圆圈,我试图将它放在屏幕的左下角并使叠加层占据整个高度和宽度,但效果不佳,这是代码:
.spotlight{
display: block;
float: left;
background: radial-gradient(10px 10px at 110px 30px, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
background: -moz-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
background: -webkit-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
background: -o-radial-gradient(10px 10px at 400px 30px, transparent 0, transparent 95px, rgba(0, 0, 0, 0.5) 100px);
height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 100000000;
bottom: 0px;
}
<div class="spotlight"></div>
最佳答案
您可以像下面这样校正渐变:
从左边开始,它应该是 65px
,从顶部开始,它应该是 100% - 65px
。 (您可以将 65px
替换为您想要的任何值)
.spotlight{
background: radial-gradient(10px 10px at 65px calc(100% - 65px), transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
height: 100%;
pointer-events: none;
position: absolute;
top:0;
left:0;
width: 100%;
z-index: 100000000;
bottom: 0px;
}
<div class="spotlight"></div>
你也可以这样简化:
.spotlight{
background: radial-gradient(circle at 65px calc(100% - 65px), transparent 60px, rgba(0, 0, 0, 0.5) 65px);
height: 100%;
pointer-events: none;
position: absolute;
top:0;
left:0;
width: 100%;
z-index: 100000000;
bottom: 0px;
}
<div class="spotlight"></div>
关于html - 带有 CSS 的聚光灯元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53507529/