Wie kann man einen Weichzeichner auf ein Hintergrundbild anwenden

In diesem Kapitel zeigen wir Ihnen, wie Sie einen Weichzeichner auf das Hintergrundbild anwenden können. Es ist sehr einfach und schnell!

Befolgen Sie die Schritte und erstellen Sie ein unscharfes Hintergrundbild für Ihre Website.

  1. Fangen Sie mit dem Erstellen von div mit einer Klasse .image. an.
.image {
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");

Stylen Sie dann die Klasse mithilfe von CSS-Eigenschaften.

  • Stellen Sie die Höhe des Bildes mit der Eigenschaft height ein und geben Sie dann die Position des Bildes mit der Eigenschaft background-position an.
.image {
height: 100%; 
background-position: center;
)

Hier haben wir den Wert "center" verwendet.

  • Nach dem Anwenden von background-position, stellen Sie sicher, dass das Bild nicht wiederholt wird, indem Sie die Eigenschaft background-repeat auf "no-repeat" einstellen.
.image {
background-repeat: no-repeat;
)
  • Geben Sie background-size mit dem Wert "cover", der das Hintergrundbild so groß wie möglich skaliert, um den gesamten Hintergrundbereich abzudecken, an. 
.image {
background-size: cover;
)
  • Jetzt müssen wir die Eigenschaft filter verwenden, um unser Bild unscharf zu machen. Die Eigenschaft filter hat einen Blur-Wert, der die Blur auf ein Bild anwendet. Sie wird durch px angegeben. Je größer der Wert, desto mehr die Unschärfe wird angewendet. Hier stellen wir es auf 5px ein.
.image {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
)
Vergessen Sie nicht, -Webkit- für Safari, Google Chrome und Opera (neuere Versionen), -ms- für Internet Explorer, -Moz- für Firefox, -o- für ältere Versionen von Opera mit der Eigenschaft filter hinzuzufügen. 
.image {
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
height: 100%; 
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

Also, die Hälfte der Arbeit ist erledigt, jetzt lassen Sie uns ein Text, der auf das Hintergrundbild angewendet wird, erstellen.

  1. Beginnen Sie damit, ein div mit einer Klasse .image zu erstellen.
.text { 
color: #eeeeee;
font-weight: bold;
border: 3px solid #cccccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

Nun lassen Sie uns das Ergebnis sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2{
      font-size:30px;
      }
      .image {
      background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(5px);
      -webkit-filter: blur(5px); 
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      }
      .text { 
      color: #eeeeee;
      font-weight: bold;
      border: 3px solid #cccccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      padding: 20px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <div class="text">
      <h1>W3DOCS</h1>
      <h2>Blurred Background Image</h2>
      <p>Snippet</p>
    </div>
  </body>
</html>

Lassen Sie uns ein weiteres Beispiel mit dem verschwommenen Hintergrundbild sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .background-image {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 1;
      display: block;
      background-image: url(" /uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
      width: 1200px;
      height: 800px;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      }
      .content {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 9999;
      margin-left: 20px;
      margin-right: 20px;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div class="background-image"></div>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.
      </p>
      <p>
        Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.
      </p>
    </div>
  </body>
</html>