Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 30.11.2014
Сообщений: 48
1

css js свет не заходил на блоки

21.01.2021, 12:19. Просмотров 1170. Ответов 2
Метки нет (Все метки)

Подскажите как сделать что свет не заходил на блоки цветные сверху и снизу . Свет должен только в блоке оставаться где ландшафт и больше не где.
https://www.pvschaf.de/drohne/ind.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drohne</title>
    <style>
        html {
            height: 100%;
 
        }
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
display: flex;
            flex-direction: column;
        }
 
        .canvas {
            width: 100%;
            height: 100%;
            background: url("Solarpark-Oberlauda.jpg") no-repeat center;
            background-size: cover;
 
        }
 
        .searchlight {
            position: absolute;
            z-index: 100;
            height: 800px;
            width: 800px;
            border-width: 100vh 100vw;
            border-style: solid;
            border-color: #000;
            top: -100vh;
            left: -100vw;
            background: #000;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            -ms-box-sizing: content-box;
            box-sizing: content-box;
 
 
 
        }
        .searchlight.on {
            background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
        }
        .center {
            display: block;
            margin: 0 auto;
 
        }
        .bild {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
 
        }
        .eins {
            background-color: aqua;
            width: 100%;
            height: 200px;
 
        }
        .zwei {
            background-color: blueviolet;
            height: 200px;
 
            bottom: 0;
            width: 100%;
 
        }
    </style>
</head>
 
<body>
 
    <div class="eins"></div>
    <div class="canvas">
            <div class="bild"><img src="drohne1.png" alt="" class="center"></div>
    </div>
    <div class="zwei"></div>
<div class="searchlight"></div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('.searchlight')
        .on('mousemove', function(event) {
            $(this).addClass('on').css({'margin-left': event.pageX - 400, 'margin-top': event.pageY - 400});
        })
        .on('mouseout', function(event) {
            $(this).removeClass('on');
        })
 
</script>
</body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.01.2021, 12:19
Ответы с готовыми решениями:

CSS Задание CSS блоки
Создайте страницу

Блоки css
krabo.ru/index.php?route=product/category&amp;path=88 Я чайник, поэтому не знаю как правильно это...

Блоки CSS
Есть код, который делает три блока как на 1 скрине, при добавлении текста в левый блок(1) , 2 и 3...

блоки в css
Здравствйте ребята. Подскажите пожалуйста, какую команду прописать, чтобы блоки при перемещние не...

2
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
22.01.2021, 08:38 2
Лучший ответ Сообщение было отмечено web_coder2 как решение

Решение

Привет horstmann,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drohne</title>
    <style>
        html {
            height: 100%;
 
        }
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
display: flex;
            flex-direction: column;
        }
 
        .canvas {
            width: 100%;
            height: 100%;
            background: url("Solarpark-Oberlauda.jpg") no-repeat center;
            background-size: cover;
 
        }
 
        .searchlight {
            position: absolute;
            z-index: 100;
            height: 800px;
            width: 800px;
            border-width: 100vh 100vw;
            border-style: solid;
            border-color: #000;
            top: -100vh;
            left: -100vw;
            background: #000;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            -ms-box-sizing: content-box;
            box-sizing: content-box;
 
 
 
        }
        .searchlight.on {
            background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
        }
        .center {
            display: block;
            margin: 0 auto;
 
        }
        .bild {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
 
        }
        .eins {
            background-color: aqua;
            width: 100%;
            height: 200px;
 
        }
        .zwei {
            background-color: blueviolet;
            height: 200px;
 
            bottom: 0;
            width: 100%;
 
        }
    </style>
</head>
 
<body>
 
    <div class="eins" style="position: relative">
        <div style="position: absolute; z-index: 101; top: 0; left:0; width: 100%; height: 100%; background: aqua"></div>
    </div>
    <div class="canvas">
            <div class="bild"><img src="drohne1.png" alt="" class="center"></div>
    </div>
    <div class="searchlight"></div>
    <div class="zwei" style="position: relative">
        <div style="position: absolute; z-index: 101; top: 0; left:0; width: 100%; height: 100%; background: blueviolet"></div>
    </div>
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('.searchlight')
        .on('mousemove', function(event) {
            $(this).addClass('on').css({'margin-left': event.pageX - 400, 'margin-top': event.pageY - 400});
        })
        .on('mouseout', function(event) {
            $(this).removeClass('on');
        })
 
</script>
</body>
</html>
1
0 / 0 / 0
Регистрация: 30.11.2014
Сообщений: 48
25.01.2021, 22:36  [ТС] 3
Спасибо большое
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.01.2021, 22:36

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Блоки в css
Добрый день, не могу создать копию блока, хотелось бы получить помощь Нужно создать точно такой же...

Блоки в css
два блока текста с разным цветом и единым фоном

блоки CSS
Делаю блоки CSS. Что я заметил. Во первых: при уменьшении окна браузера блоки могут немного...

Блоки в CSS
Доброго времени суток! Помогите плиз с DIVфами... Существует резиновый сайт. Мне нужно в...

Блоки в css html
подскажите как сделать 3 блока подряд &lt;div id=&quot;vse&quot;&gt; &lt;div id=&quot;vse1&quot;&gt;&lt;/div&gt; &lt;div...

CSS. Блоки DIV
Всем привет! Зарегался сёдня здесь, в надежде на помощь по CSS. Идея такова, что делаю сайт...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.