Hallo,
ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.
Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.
Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.
Also habe ich mir diesen Code hier ausgedacht:
<html>
<head>
<style>
#example {
box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
/*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
margin-left: -10vw;
margin-right: -10vw;
margin-top: 0px;
margin-bottom: 6vh;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 0px;
padding-bottom: 0px;
boarder-left: 0px;
boarder-right: 0px;
boarder-top: 0px;
boarder-bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 2vh;
left: 0px;
}
</style>
</head>
<body>
<div id="example">
<img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>
</body>
Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.
Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.
Woran liegt das und wie kann ich das vermeiden?
(Firefox Dev-Edition 66.0b1 (64-bit))
Nur noch eine kleine Frage wo ist da genau die Farbe definiert?