时间戳

首页 > 解决方案 > 带 css 的聚光灯元素

html - 带 css 的聚光灯元素

问题描述

我有一个聚光灯圈，我试图将它放在屏幕的左下角，并使覆盖层具有完整的高度和宽度，但它不能完美地工作，这里是代码：

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

标签： htmlcssoverlayspotlight

解决方案

您可以像下面这样校正渐变：

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

推荐阅读