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

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

奋力向前

Freigeben： 2021-08-15 15:04:02

Original

7975 Leute haben es durchsucht

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.

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

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>

Nach dem Login kopieren

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;
    }

Nach dem Login kopieren

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)；
   ｝

Nach dem Login kopieren

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;
     ｝

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;         
    }


时间也抛弃他

Nach dem Login kopieren

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!