Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images d'arrière-plan aux polices HTML (partage de code)-tutoriel CSS-php.cn

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images d'arrière-plan aux polices HTML (partage de code)

奋力向前

Libérer： 2021-08-15 15:04:02

original

7974 Les gens l'ont consulté

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS pour ajouter des effets de bordure aux polices HTML (partage de code)", je vous ai présenté comment utiliser CSS pour ajouter des effets de bordure aux polices HTML. L'article suivant vous présentera comment utiliser CSS pour ajouter une image d'arrière-plan aux polices HTML. Voyons comment le faire ensemble.

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images d'arrière-plan aux polices HTML (partage de code)

Jetons d'abord un coup d'œil à l'effet final

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code)

Comment ajouter une image d'arrière-plan à la police ?

1. Lors de l'ouverture du code HTML, écrivez d'abord la balise div. Entre

et , entrez le code

Exemple de code

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

Copier après la connexion

Effet de code

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code)

Résultat de sortie du code, la police est trop petite, je veux agrandir la police, comment puis-je l'agrandir ? Utilisez l'attribut font-family pour définir le style de police du texte. N'oubliez pas d'écrire Exemple de code

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

Copier après la connexion

Effet de code

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code)

Résultat de sortie du code Maintenant que l'effet est terminé, comment ajouter une image de fond à la police ? Essayez d'utiliser background: url() pour voir comment cela fonctionne.

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

Copier après la connexion

Rendus de code

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code) Le résultat est que le redimensionnement ne fonctionne pas. Que dois-je faire lorsque la taille du texte change ? Nous pouvons utiliser l'exemple de code de taille (largeur et hauteur) de la boîte div

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

Copier après la connexion

Effet de code

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code)

Avec l'effet de la taille du texte, nous avons constaté que cela ajoute uniquement une image d'arrière-plan à la boîte div, pas la Il manque à l'image d'arrière-plan un attribut background-origin pour définir le style, exemple de code.

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

Copier après la connexion

Image d'effet

Une astuce pour vous apprendre à utiliser les CSS pour ajouter des images darrière-plan aux polices HTML (partage de code)

ok, tu as terminé~

Code complet




给字体添加图片

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


时间也抛弃他

Copier après la connexion

Que signifie background-origin ? En l'expliquant à tout le monde. background-origin是什么意思呢？通过给大家解释一下。

css中的background-origin

L'attribut background-origin en CSS fait référence à l'image d'arrière-plan de positionnement de la zone de contenu. Il y a trois valeurs. Quelles sont les trois valeurs ?

padding-box padding box
border-box border box

content-box content box

grammar code

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

Copier après la connexion

apprentissage recommandé : Tutoriel vidéo CSS🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!