css 的聚光灯元素
Spotlight element with 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>
您可以像下面这样修正渐变:
从左边开始应该是 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>
您可以通过在 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;
}
不要使用 "at 110px 30px",请尝试使用 "at 110px calc(100% - 110px)"。无论屏幕尺寸如何,这应该将渐变聚光灯放在距左侧 110px 和距底部 110px 的位置。
我有一个聚光灯圆圈,我试图将它放在屏幕的左下角并使叠加层占据整个高度和宽度,但效果不佳,这是代码:
.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>
您可以通过在 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;
}
不要使用 "at 110px 30px",请尝试使用 "at 110px calc(100% - 110px)"。无论屏幕尺寸如何,这应该将渐变聚光灯放在距左侧 110px 和距底部 110px 的位置。