Heim > Artikel > Web-Frontend > Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

奋力向前Original: 2021-08-13 16:56:197853Durchsuche

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS Randeffekte zu HTML-Schriftarten hinzufügen (Code-Sharing)“ habe ich Ihnen gezeigt, wie Sie mit CSS Randeffekte zu HTML-Schriftarten hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mithilfe von CSS ein Hintergrundbild zu HTML-Schriftarten hinzufügen. Sehen wir uns an, wie das gemeinsam geht.

Werfen wir zunächst einen Blick auf den endgültigen Effekt

Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

Wie füge ich der Schriftart ein Hintergrundbild hinzu?

1. Schreiben Sie beim Öffnen des HTML-Codes zuerst den div-Tag zwischen

und vergessen Sie ihn.

Codebeispiel

<!DOCTYPE html>
<html>
<head>
<title>给字体添加图片</title>
</head>
<body>
<div>时间也抛弃他</1div>
</body>
</html>

Codeeffekt

Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

Codeausgabeergebnis, die Schriftart ist zu klein, ich möchte die Schriftart vergrößern, wie kann ich sie vergrößern? Verwenden Sie das Attribut „font-family“, um den Schriftstil des Textes festzulegen. Vergessen Sie nicht, Codebeispiel

<style type="text/css">
    * {
        font-family: fantasy;
        font-size: 2em;
    }

Codeeffekt

zu schreiben Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

Ergebnis der Codeausgabe Nun, da der Effekt fertig ist, wie füge ich der Schriftart ein Hintergrundbild hinzu? Versuchen Sie es mit „background: url()“, um zu sehen, wie es funktioniert.

div {
   background: url(3.jpg)；
   ｝

Code-Renderings

Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing) Das Ergebnis ist, dass die Größenänderung nicht funktioniert. Was soll ich tun, wenn sich die Größe des Textes ändert? Wir können das Codebeispiel für die Größe (Breite und Höhe) des Div-Felds verwenden Dem Hintergrundbild fehlt ein Attribut „background-origin“, um den Stil festzulegen, Codebeispiel.

 div {
        height:180px;
        width:710px;
     ｝

Effektbild

Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

ok, du bist fertig~

Vollständiger Code

background-origin: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Was bedeutet background-origin? Indem man es allen erklärt. Ein Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing)

Das Attribut background-origin bezieht sich auf das Positionierungshintergrundbild der Inhaltsbox. Es gibt drei Werte.

Padding-Box Padding Box

Border-Box Border Box

Content-Box Content Box

background-origin是什么意思呢？通过给大家解释一下。

css中的background-originGrammatikcode




给字体添加图片

<style type="text/css">
    * {
        font-family: fantasy;
        font-size: 2em;
    }
    div {
        height:180px;
        width:710px;
        background: url(3.jpg) no-repeat; 
        background-origin: 
        border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;         
    }


时间也抛弃他

Empfohlenes Lernen:
CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Trick, um Ihnen beizubringen, wie Sie mit CSS Hintergrundbilder zu HTML-Schriftarten hinzufügen (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie mit einem Trick farbenfrohe Hintergründe mit CSS-ElementenNächster Artikel：Erstellen Sie mit einem Trick farbenfrohe Hintergründe mit CSS-Elementen

In Verbindung stehende Artikel

Mehr sehen