81 lines
1.8 KiB
CSS
81 lines
1.8 KiB
CSS
body{
|
|
height: 100%;
|
|
background-image: linear-gradient(to right, rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.671)), url(Setup.jpg);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
.myh{
|
|
font-size: 200%;
|
|
text-decoration: underline;
|
|
text-align:center;
|
|
letter-spacing: 2pt;
|
|
|
|
color: rgb(255, 115, 0);
|
|
}
|
|
#mainImage {
|
|
cursor: pointer;
|
|
margin-top: 200px;
|
|
margin-left: 63%;
|
|
}
|
|
|
|
.overlayImage {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 150px;
|
|
top: 600;
|
|
left: 400;
|
|
}
|
|
body {
|
|
margin: 200;
|
|
padding: 0;
|
|
}
|
|
|
|
.image-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 1000px; /* Ändere die Breite und Höhe entsprechend deinem Bild */
|
|
height: 1000px;
|
|
}
|
|
|
|
.overlay-image {
|
|
margin-top: 0%;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
S
|
|
.overlay-container {
|
|
position: relative;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(117, 15, 15, 0.582); /* Ändere die Hintergrundfarbe und die Deckkraft nach Bedarf */
|
|
transform-origin: 0 0;
|
|
transform: skewY(-10deg); /* Ändere den Winkel des schrägen Overlays */
|
|
z-index: 1; /* Stelle sicher, dass das Overlay über dem Bild liegt */
|
|
}
|
|
#image-container {
|
|
position: relative;
|
|
}
|
|
|
|
#insertedImage {
|
|
width: 100%; /* Beispiel: Das Bild nimmt die volle Breite des Containers ein */
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
#insertButton {
|
|
position: absolute;
|
|
top: 50px; /* Beispiel: Der Button befindet sich 50 Pixel von oben */
|
|
left: 100px; /* Beispiel: Der Button befindet sich 100 Pixel von links */
|
|
background-color: black;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 1; /* Damit der Button über dem Bild erscheint */
|
|
}
|
|
|
|
|