与css的聚光灯元素

Question

我有一个聚光灯圈，我试图将它放在屏幕的左下方，并使叠加层占据全高和宽度，但它不能正常工作，这里是代码：

 .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> 

Answer 1

您可以像下面那样更正渐变：

从左边开始它应该是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> 

Answer 2

你可以通过在它所说的at之后修改径向渐变来使它到达左下角。 第一个测量值表示您想要它离您的左侧多远，第二个测量值表示您想要它离您的顶部有多远。 您可以用left或bottom替换像素测量值，以获得左下角的聚光灯。

这是一个有效的例子： https ： //jsfiddle.net/71w4jy9c/

如果你想让它从底部显示得更远，你可以使用calc(100% - PIXELS_FROM_THE_BOTTOM)而不是bottom 。

这是我用来使它工作的CSS：

.spotlight {
  display: block;
  background: radial-gradient(10px 10px at 30px bottom, transparent 0, transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  position: absolute;
  width: 100%;
  bottom: 0;
}

Answer 3

而不是使用“at 110px 30px”尝试使用“at 110px calc（100％ - 110px）” 。 无论屏幕大小如何，都应将渐变聚光灯放在左侧110px和底部110px处。