Heim >Web-Frontend >CSS-Tutorial >Wie platziere ich ein Bild oder Video in einer Silhouette?
Wie platziere ich ein Bild oder Video in einer Silhouette?
- 王林nach vorne
- 2023-09-12 17:29:021321Durchsuche
Möglicherweise haben Sie auf einigen Websites Bilder oder Videos gesehen, die als Silhouetten abgespielt wurden. Eine Silhouette kann ein Bild, ein Objekt, eine Person oder ein Tier sein und wird in Schwarz dargestellt und umreißt das Motiv. Wir können jedes Bild oder Video in die Silhouette einfügen, sodass das Video oder Bild in der Farbe der Silhouette erscheint
In diesem Artikel erfahren Sie, wie Sie ein Bild oder Video in eine Silhouette einfügen.
Wie platziere ich Objekte innerhalb von Umrissen?
Eine Silhouette ist ein Bild eines Objekts oder einer Person, dargestellt durch eine einfarbige Form in Schwarz oder einer anderen Palettenfarbe. Das Attribut, das wir hier verwenden werden, ist das mix-blend-Attribut, das angibt, wie der Inhalt eines bestimmten Elements mit dem nächstgelegenen übergeordneten Element gemischt wird.
Grammatik
Das Folgende ist die Syntax für die Verwendung des Mix-Blend-Attributs -
mix-blend mode: =darken,multiply,normal;
Mischungsmodi haben Werte wie „Normal“, „Multiplizieren“, „Bildschirm“ und „Abdunkeln“, wobei jeder die Mischbeziehung mit dem nächstgelegenen übergeordneten Element ändert. Schauen wir uns ein Beispiel an, um diese Mischeigenschaft besser zu verstehen.
Beispiel
Im folgenden Beispiel erstellen wir drei Container und versehen diese dann mit drei verschiedenen Klassen. Dann haben wir im CSS-Abschnitt die Breite und Höhe sowie den Randradius geändert, um daraus einen Kreis zu machen, und dann die Farbe aller Kreise geändert. Der erwartete Ausgabecode lautet wie folgt -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
}
</style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div>
</div>
</body>
</html>
Wie Sie sehen können, mischen wir mithilfe der Mix-Blend-Eigenschaft den obigen Kreis mit zwei verschiedenen Farben.
Da wir nun wissen, wie das Mischmodus-Attribut funktioniert, platzieren wir ein Bild oder Video in der Silhouette und stellen sicher, dass wir über die dafür erforderlichen Ressourcen verfügen. Schauen wir uns den Codeabschnitt an und sehen wir, wie man ein Bild oder Video in die Silhouette einfügt.
Beispiel
In diesem Beispiel fügen wir mithilfe der Eigenschaft Blend Blend Mode ein Bild zu einem Silhouettenbild hinzu.
Hier haben wir zuerst das Silhouettenbild und dann das Bild hinzugefügt, das wir überblenden möchten. Als nächstes packen wir sie unter ein Div und geben ihnen eine Klasse. Gehen Sie danach zum CSS-Bereich und verwenden Sie die Eigenschaft „Mix-Blend-Modus“ für das von uns hinzugefügte Bild und legen Sie den Wert auf „Bildschirm“ fest. Sehen wir uns die Ausgabe an, die wir mit dem folgenden Code erhalten.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the silhoutte property</title>
<style>
.con {
justify-content: center;
display: flex;
align-items: center;
}
body {
min-height: 99vh;
}
.con .main {
position: relative;
width: 399px;
margin: 48px;
height: 399px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.con .main img {
top: 0;
left: 0;
position: absolute;
width: 98%;
mix-blend-mode: screen;
height: 99%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<img src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001" / alt="Wie platziere ich ein Bild oder Video in einer Silhouette?" >
<img src="https://www.tutorialspoint.com/images/logo.png" / alt="Wie platziere ich ein Bild oder Video in einer Silhouette?" >
</div>
</div>
</body>
</html>
In der obigen Ausgabe können Sie sehen, dass wir das Silhouettenbild und dann ein weiteres Bild hinzugefügt haben. Wenn wir die Eigenschaft „Blend Blend Mode“ verwenden, verschmilzt das Bild mit der Silhouette und es sieht so aus, als wäre es stattdessen dasselbe Bild und nicht zwei verschiedene Bilder.
Hinweis – Wir können das Attribut für den gemischten Mischmodus für Text, Bilder und SVG verwenden. Zu den Browsern, die das Attribut für den gemischten Mischmodus unterstützen, gehören Chrome, Edge, Safari, Firefox usw. p>
Fazit
Der Silhouetteneffekt kann verwendet werden, um eine Website interaktiver und attraktiver zu gestalten, und zwar mit nur einer einzigen CSS-Eigenschaft, der mix-blend-Eigenschaft, die definiert, wie der Inhalt mit dem nächstgelegenen übergeordneten Element und dem Hintergrund des übergeordneten Elements verschmilzt.
In diesem Artikel haben wir gelernt, wie man mithilfe einiger CSS-Eigenschaften wie der Eigenschaft Blend Blend Mode ein Bild oder Video in eine Silhouette einfügt.
Das obige ist der detaillierte Inhalt vonWie platziere ich ein Bild oder Video in einer Silhouette?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!