(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!
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;
}Nach dem Login kopieren
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;
}Nach dem Login kopieren
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
Manchmal 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>
Nach dem Login kopieren
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.
Die 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!
Ssbody {
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);
}Nach dem Login kopieren
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
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
}Nach dem Login kopieren
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;
}Nach dem Login kopieren
Fallquellcode: https://codepen.io/duomly/pen/MWaQNWb
7、将背景图像设置为文本颜色
使用background-image与 background-clip ，可以实现背景图像对文字的优美效果。 在某些情况下，它可能非常有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。
HTML
<body>
<h1>Hello world!</h1>
</body>
Nach dem Login kopieren
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;
}Nach dem Login kopieren
事例源码：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!
