horstmann: Licht nur in bestimmten Block soll funktionieren

Beitrag lesen

SELF-Forum

Licht nur in bestimmten Block soll funktionieren

horstmann (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo ,

  1. wie kann ich machen, dass das Licht nur bei Landschaft Bild bleibt und auf Blöcke unten und oben nicht reinkommt ?
  2. wie kann ich class .searchlight.on nur den Block .canvas zuweise ?
  3. Wie kann ich den schwarzen Background nur den .canvas block zuweisen ?
<!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: 300px;

        }
        .zwei {
            background-color: blueviolet;
            height: 300px;

            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>
Beitrag melden
–
Informationen zu den Bewertungsregeln