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

请尝试使用“ 110px像素为Calc（100％-110px）” ，而不是使用“ 110px 30px”。。不管屏幕大小如何，都应该将渐变聚光灯放在左侧的110px和底部的110px中。

带有CSS的Spotlight元素

3 个答案: