Элемент Spotlight с 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>
Ответы 3
Вы можете исправить градиент, как показано ниже:
слева должен быть 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;
}
Вместо использования "при 110px 30px" попробуйте использовать "при вычислении 110 пикселей (100% - 110 пикселей)". Это должно разместить ваш градиентный прожектор в 110 пикселей слева и 110 пикселей снизу независимо от размера экрана.