HTML CSS Background Filter?
Hi ich habe seit einer Woche angefangen mit das Programmieren beizubringen, und bin nun auf folgendes Problem gestoßen.
Ich habe bei der HTML Datei in <body> das hier drin :
<body>
<header id="header">
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="" class="active"><b>Tv Shows</b></a></li>
<li><a href="" class="active">Movies</a></li>
<li><a href="" class="active">Recetly Added</a></li>
</ul>
<a href="" class="logo">NETFLIX</a>
</header>
<section>
<img src="logo.png" alt="" style="width: 700px; height: 300px; position: absolute; left: 40px; top: 100px;">
<div class="content">
<div class="details">
<span>99% Match</span>
<span>2011-2022</span>
<span>18+</span>
</div>
<div class="button">
<span class="btn1"> <img src="playbtn.png" alt="" style="position: relative; top: 8px;"> Play</span>
<span class="btn2">+ My List</span>
</div>
</div>
</section>
</body>
Und in der CSS Datei habe ich den Body so definiert:
body{
background: url(wallpaper1.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
Nun habe ich das Problem wenn ich nun einen Filter wie z.B Brightness anwenden will macht es ja nun logischerweise den ganzen Body Dunkler aber ich möchte nur den background verdunkelnm, sodass die anderen Elemente stärker zum Vorschein kommen.
Und meine zweite Frage wäre diesen background zu Skalieren weil auf dem Original Bild ist unten links ein kleiner Schriftzug der auf der Website nun abgeschnitten ist.
Vielen Dank :)
2 Antworten
Du kannst einen zusätzlichen Gradient definieren, welcher den Hintergrund im Endeffekt abdunkelt:
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("...");
Bezüglich der Bildskalierung hast du zwar die Möglichkeit, für background-size andere Werte zu setzen, allerdings wirst du natürlich je Bildschirm(-größe) andere Zustände erleben. Da wäre es wohl besser, die Schrift herauszunehmen. Wenn sie dem Inhalt beitragen soll, würde ich sie als tatsächliches Textelement platzieren.
Ich meine du möchtest gerne den CSS backdrop-filter. Dieser kann den Hintergrund mit Filter-Effekten kombinieren. Dabei kannst du alle Filter der CSS-Eigenschaft filter anwenden. Hier ein Beispiel:
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
Indem oberen Beispiel ensteht ein Milchglas-Effekt.
Auf der Seite https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/backdrop-filter findest du weitere Informationen darüber.
PS: Wenn dir mein Beitrag dir geholfen hat, dann lass eine Bewertung da.