interface Webtutoriel CSSBackground-orgin en CSS3 implémente l'effet d'affichage de photos avec un cadre photo - analyse de cas (exemple de code)
Objectifs de cet article :
1. Maîtriser l'utilisation de l'origine background-origin
Questions :
1. Pour obtenir les effets suivants, utilisez du DIV+CSS pur, l'origine d'arrière-plan background-orgin doit être utilisée
Instructions supplémentaires :
Chaque cadre photo mesure 500 px de large et 500 px de haut. , avec une bordure de 20 px de large et le texte à l'intérieur. Le remplissage est de 20 et la taille de la bordure est de 20 px
2 Les photos à l'intérieur doivent être implémentées en fonction de l'image d'arrière-plan
Faisons maintenant le. opération spécifique
1. Préparez les matériaux : Racine Créez un dossier d'images dans le répertoire et stockez ici toutes les images de matériaux pertinentes. Les matériaux incluent
2. Créer un bon index.html, écrire la structure, comment analyser la structure
Analyse des idées : 1. La cible est divisée en parties supérieure et inférieure. Chaque partie est en fait affichée avec un cadre photo (div (avec bordures), donc tant que la première implémentation est terminée, la deuxième partie peut être copiée 2. Mais si vous regardez attentivement, l'affichage de la photo ci-dessus et de la photo ci-dessous est encore un peu différent. L'image d'arrière-plan du premier div est à l'intérieur de la bordure, et l'image d'arrière-plan du div ci-dessous est à l'intérieur de la bordure. 3. Chaque partie est en fait un DIV, y compris la bordure, et l'image d'arrière-plan est une photo, qui contient une chaîne, chaîne Inclure l'espacement entre le haut et le bas Selon l'analyse, nous obtenons le code suivant<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点制作怀旧照片</title>
</head>
<body>
<div class="container">
<div class="photo xtf">
<div class="content">谢霆锋年轻的样子，一个字帅</div>
</div>
<div class="photo zbz">
<div class="content">张柏芝年轻的样子，一个字美</div>
</div>
</div>
</body>
</html>
3. Écrivez le style, créez un dossier css, créez un nouveau index.css à l'intérieur, comment écrire le style à l'intérieur, Voici l'idée d'analyse
Analyse des idées :1.container *Analyse des idées1. Afin de définir tous les éléments dans les styles publics du conteneur, nous pouvons. écrivez ces codes publics dans le style .container * , ajoutez donc le code suivant à index.css :.container *{
padding:0;
margin:0;
}2 .photo photo 1. Selon le. exigences, la bordure est de 20 px et la ligne pointillée est affichée. Le code converti est border-width : 20px ; border-style : dashed ; le texte à l'intérieur a un espacement, donc padding : 20px, font-weight : bold, color C'est le cas. couleur blanche : #fff;.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}3 Les premiers paramètres de la photo
À cause de la bordure de cette photo. est rouge, donc border-color: red; alors l'arrière-plan est une photo d'un beau mec, et d'après l'effet, vous pouvez voir que la couleur entre les lignes pointillées est grise, ce qui est #ccc, donc background:#ccc url( ../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat ; La chose la plus importante est que son image d'arrière-plan commence à partir du remplissage, donc
background-origin: padding-box; faites attention ici, Pour que background-origin prenne effet, background doit définir l'attribut no-repeat
ajoutez donc le code à index.css comme suit :.xtf{
background:#ccc url(../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat;
border-color: red;
background-origin: padding-box;
}4 Les paramètres de la deuxième photo
Parce que la bordure de cette photo est orange, couleur de bordure. : orange ; alors l'arrière-plan est une photo d'une belle femme, et ensuite On peut voir à partir de l'effet que la couleur entre les lignes pointillées est grise, ce qui est #ccc, donc background:#ccc url(../images/ Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat; Le plus important est que son image d'arrière-plan commence à partir de la bordure, donc
background-origin: border-box;In pour que background-origin prenne effet, background doit définir l'attribut no-repeat
Ajoutez donc le code suivant à index.css :.zbz{
background:#ccc url(../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat;
background-origin: border-box;
border-color: orange;
}Donc jusqu'à présent, tout le contenu de index.css est le suivant : .container *{
padding:0;
margin:0;
}
.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}
.xtf{
background:#ccc url(../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat;
border-color: red;
background-origin: padding-box;
}
.zbz{
background:#ccc url(../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat;
background-origin: border-box;
border-color: orange;
}Puis introduisez index.css dans index L'effet d'exécution de <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点制作怀旧照片</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="photo xtf">
<div class="content">谢霆锋年轻的样子，一个字帅</div>
</div>
<div class="photo zbz">
<div class="content">张柏芝年轻的样子，一个字美</div>
</div>
</div>
</body>
</html> dans .html est le suivant :
.
.xtf{
background:#ccc url(../images/Background-orgin en CSS3 implémente leffet daffichage de photos avec un cadre photo - analyse de cas (exemple de code)) no-repeat;
border-color: red;
background-origin: content-box;/**修改成content-box**/
}
运行结果为：
我们就发现背景图片按照内容为原点显示了
总结：
1、学习了背景原点background-origin的用法，它有3个类型，
一个是border-box:背景图片以边框为起始点
一个是padding-box：背景图片以padding为起始点
一个是content-box：背景图片以内容为起始点
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!
Simulation du mouvement de la sourisApr 22, 2025 am 11:45 AMSi vous avez jamais eu à afficher une animation interactive lors d'un discours en direct ou d'une classe, vous savez peut-être que ce n'est pas toujours facile d'interagir avec vos diapositives
Alimentation de recherche avec Astro Actions et Fuse.jsApr 22, 2025 am 11:41 AMAvec Astro, nous pouvons générer la plupart de notre site pendant notre version, mais avoir un petit peu de code côté serveur qui peut gérer les fonctionnalités de recherche en utilisant quelque chose comme Fuse.js. Dans cette démo, nous utiliserons du fusible pour rechercher un ensemble de «signets» personnels
Undefined: la troisième valeur booléenneApr 22, 2025 am 11:38 AMJe voulais implémenter un message de notification dans l'un de mes projets, similaire à ce que vous verriez dans Google Docs pendant que un document enregistre. En d'autres termes, un
Pour défendre la déclaration ternaireApr 22, 2025 am 11:25 AMIl y a quelques mois, j'étais sur Hacker News (comme on le fait) et j'ai rencontré un article (maintenant supprimé) sur le fait de ne pas utiliser les déclarations. Si vous êtes nouveau dans cette idée (comme moi
Utilisation de l'API de discours Web pour les traductions multilinguesApr 22, 2025 am 11:23 AMDepuis les premiers jours de la science-fiction, nous avons fantasmé sur les machines qui nous parlent. Aujourd'hui, c'est monnaie courante. Même ainsi, la technologie de fabrication
Blocs de jetpack GutenbergApr 22, 2025 am 11:20 AMJe me souviens quand Gutenberg a été libéré dans Core, parce que j'étais à WordCamp Us ce jour-là. Un certain nombre de mois se sont passés maintenant, donc j'imagine de plus en plus d'entre nous
Création d'un composant de pagination réutilisable dans VueApr 22, 2025 am 11:17 AML'idée derrière la plupart des applications Web est de récupérer les données de la base de données et de la présenter à l'utilisateur de la meilleure façon possible. Quand nous traitons des données là-bas
En utilisant 'Box Shadows' et Clip-chemin ensembleApr 22, 2025 am 11:13 AMLaissez faire un peu étape par étape d'une situation où vous ne pouvez pas faire ce qui semble logique, mais vous pouvez toujours le faire avec la ruse CSS. En ce moment
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
