带 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)"。这应该将您的渐变聚光灯放置在距左侧 110 像素和距底部 110 像素的位置，无论屏幕大小如何。