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

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

奋力向前original: 2021-08-13 16:56:197854parcourir

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.

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>

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

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

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

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;

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


时间也抛弃他

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;

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créez des arrière-plans colorés avec des éléments CSS en une seule astuceArticle suivant：Créez des arrière-plans colorés avec des éléments CSS en une seule astuce

Articles Liés

Voir plus