简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  7 praktische Tipps für CSS-Hintergrundbilder

7 praktische Tipps für CSS-Hintergrundbilder

青灯夜游
青灯夜游nach vorne
2020-10-13 13:41:213458Durchsuche

7 praktische Tipps für CSS-Hintergrundbilder

(Empfohlenes Tutorial: CSS-Tutorial)

background-image ist wahrscheinlich eine der CSS-Eigenschaften, die wir alle (Front-End-Entwickler) mindestens ein paar Mal in unserer Karriere verwendet haben. Die meisten Leute denken, dass Hintergrundbilder nichts Ungewöhnliches sind, aber nach Recherche ist die Antwort nicht so.

In diesem Artikel wurden also die sieben Tipps zusammengestellt, die ich am nützlichsten finde, und einige Codebeispiele erstellt, in denen Sie sehen können, was los ist.

1. Passen Sie das Hintergrundbild perfekt an das Ansichtsfenster an

Beginnen wir mit etwas Technischerem als nur einem Trick. Wie oft mussten Sie mit Ihrem Hintergrundbild kämpfen, damit es perfekt passt, ohne dass es gestreckt und attraktiv wirkt?

Hier erfahren Sie, wie Sie dafür sorgen, dass Ihr Hintergrundbild immer perfekt in Ihr Browserfenster passt!

7 praktische Tipps für CSS-Hintergrundbilder

css

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Fallquellcode: https://codepen.io/duomly/pen/xxwYBOE

2. Verwenden Sie mehrere Hintergrundbilder in CSS wenn ich mehr als ein Bild zum Hintergrund hinzufügen möchte? Es ist möglich und nicht sehr schwierig, aber wenn Sie die Idee haben, zwei Formen zu etwas Schönem zu verschmelzen, können Sie ein schönes Ergebnis erzielen.

Es ist sehr nützlich, wenn wir ein Muster über einem Hintergrundbild hinzufügen möchten. Das zeigen wir Ihnen in diesem Beispiel.

Mehrere Hintergrundpfade können direkt in CSS3 angegeben werden, wie unten gezeigt: 

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
7 praktische Tipps für CSS-Hintergrundbilder

Case-Quellcode: https://codepen.io/duomly/pen/eYpVoJR

3. Erstellen Sie ein Dreieck Hintergrundbild

Ein weiterer cooler CSS-Hintergrundbild-Trick ist das Dreieck-Hintergrundbild. Es entstehen sehr schöne Effekte, insbesondere wenn wir völlig unterschiedliche Optionen zeigen möchten (z. B. Tag und Nacht oder Winter und Sommer). Die Idee ist folgende: Erstellen Sie zunächst zwei

Attribute, um ein Dreieck zu zeichnen.

... das Hintergrundbild div，然后将两个背景都添加到其中，然后，第二个div使用clip-path

7 praktische Tipps für CSS-HintergrundbilderManchmal möchten wir etwas Text zum Hintergrund hinzufügen, aber einige Bilder sind zu hell und der Text ist nicht deutlich zu sehen. Deshalb müssen wir hier etwas dunkle Musik über das Hintergrundbild legen, um den Texteffekt hervorzuheben.

Zum Beispiel kann ein Sonnenuntergangsbild durch Hinzufügen eines Rosa-Orange-Verlaufs oder eines Rot-zu-Transparent-Verlaufs verbessert werden. Diese Fälle lassen sich einfach mit Overlay-Verläufen umsetzen.

Sehen wir uns an, wie Sie einem Hintergrundbild ganz einfach eine Verlaufsüberlagerung hinzufügen können!

css

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

Case-Quellcode: https://codepen.io/duomly/pen/rNOJgQE

5. Erstellen Sie eine farbverändernde Hintergrundbildanimation

Wenn Sie entscheiden können, welche Farbe, die als Überlagerung eines Hintergrundbilds verwendet werden soll. Animationen auf dem Hintergrundbild sind sehr nützlich.

7 praktische Tipps für CSS-HintergrundbilderDie Verwendung eines animierten Overlays kann Ihrer Website einen großartigen Endeffekt verleihen und natürlich werden sich die Leute daran erinnern.

Sehen wir uns an, was Sie mit Hintergrundbildern und Animationen in CSS machen können!

Ss

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

case Quellcode: https://codepen.io/duomly/pen/goavnov

6. Wenn es sich um ein Kunst- oder Fotoprojekt handelt, muss die Website im Allgemeinen künstlerische Informationen enthalten und kreativ sein. Der Netzwerkhintergrund ist ziemlich kreativ und der Effekt ist wie folgt:

HTML

7 praktische Tipps für CSS-Hintergrundbilder

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

scss

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}

@-webkit-keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%)
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}

body {
   background-image: url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

Fallquellcode: https://codepen.io/duomly/pen/MWaQNWb

7、将背景图像设置为文本颜色

使用background-image与 background-clip ，可以实现背景图像对文字的优美效果。 在某些情况下，它可能非常有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。

7 praktische Tipps für CSS-Hintergrundbilder

HTML

<body>
  <h1>Hello world!</h1>
</body>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
   background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

事例源码：https://codepen.io/duomly/pen/wvKyVjG

英文原文地址：https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0

作者：ryanmcdermott

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt von7 praktische Tipps für CSS-Hintergrundbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 background https
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Eine ausführliche Analyse des CSS-Layouts und BFCNächster Artikel：Eine ausführliche Analyse des CSS-Layouts und BFC

In Verbindung stehende Artikel

Mehr sehen