简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Introduction à la création de styles d'arrière-plan rayés pour les pages Web à l'aide de CSS

不言
Libérer： 2018-07-02 11:07:41
original
2404 Les gens l'ont consulté

Cet article présente principalement l'introduction du CSS pour créer des styles d'arrière-plan rayés pour les pages Web. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Grâce à l'entrée linéaire. CSS Gradient peut principalement afficher des effets de rayures dans différentes directions. Ici, nous expliquerons en détail les techniques de création de styles d'arrière-plan rayés pour les pages Web avec CSS. Les amis dans le besoin peuvent se référer à

1. Rayures horizontales<.>
Le code suivant : 

background: linear-gradient(#fb3 20%, #58a 80%)
Copier après la connexion
Le code ci-dessus indique que les 20 % supérieurs et les 20 % inférieurs de l'image entière sont des couleurs unies correspondantes, et que seule la partie centrale est une couleur dégradée. Si la partie médiane est progressivement réduite, lorsque la partie médiane devient 0, c'est-à-dire que les sept points et points finaux des couleurs supérieure et inférieure sont les mêmes, il n'y aura pas de dégradé et cela deviendra une barre de couleur de deux couleurs : 

background: linear-gradient(#fb3 50%, #58a 50%);
Copier après la connexion
Ensuite, vous pouvez définir la taille de l'arrière-plan pour réduire la hauteur de l'arrière-plan et les valeurs par défaut de l'arrière-plan se répètent, ce qui donne une apparence rayée

background: linear-gradient(#fb3 50%, #58a 50%);   
background-size: 100% 30px;
Copier après la connexion
Nous ne pouvons pas définir la position de départ de la deuxième couleur, réglez-la sur 0, le navigateur commence par défaut par la couleur précédente : 

background: linear-gradient(#fb3 30%, #58a 0);   
background-size:100% 30px;
Copier après la connexion
Cela forme un fond rayé avec 30 % de jaune et 70 % de bleu

Vous. peut également définir plusieurs couleurs. Trois couleurs de rayures sont définies ci-dessous : 

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   
background-size: 100% 45px;
Copier après la connexion

2. Rayures verticales
Ajoutez simplement un préfixe à la méthode du dégradé linéaire. Notez que vous devez également inverser les paramètres de longueur et de largeur de la taille de l'arrière-plan 

background: linear-gradient(to rightright, #fb3 50%, #58a 0);     
background-size:30px 100%;
Copier après la connexion

3. Rayures diagonales
Vous pouvez modifier la valeur de la taille de l'arrière-plan et ajouter un angle par rapport au dégradé linéaire Pour obtenir des rayures diagonales : background: Linear-gradient(45deg, #fb3 50%, #58a 0 //Faites basculer le dégradé de l'arrière-plan
background-size:30px 30px); ; //Chaque Un petit composant a une largeur et une hauteur fixes
, mais le résultat est qu'il ne formera qu'un petit morceau de ligne diagonale, plutôt que la ligne diagonale de l'ensemble p. ligne diagonale dans un groupe de quatre petites lignes p, ajoutez une décomposition de couleur en dégradé linéaire : 

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     
background-size:30px 30px;
Copier après la connexion

4. Utilisez un dégradé linéaire répété
Pour le dessin d'arrière-plan de la diagonale lignes, utiliser la méthode de répétition de dégradé linéaire est plus efficace. Lorsque vous utilisez cette méthode, les changements de couleur définis se répéteront automatiquement jusqu'à ce que la totalité du p soit couverte. L'exemple de code est le suivant : 

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
Copier après la connexion
De cette façon, l'angle peut être modifié arbitrairement sans les difficultés de réglage de la méthode ci-dessus

background: Repeating-linear-gradient(60deg, #fb3, # fb315px, #58a 0, #58a 30px);
(Cette méthode équivaut en fait à combiner le contrôle de la taille et le contrôle du dégradé)

5. À propos des paramètres de couleur
Parfois. nous espérons que les couleurs du fond des rayures sont similaires les unes aux autres, mais il est très gênant de définir manuellement le # de cette couleur, et il est également difficile de savoir quelle couleur choisir. Vous pouvez utiliser la méthode suivante : 

background: #58a;     
background-image: repeating-linear-gradient(30deg,     
hsla(0,0%,100%,.1),     
hsla(0,0%,100%,.1)15px,     
transparent 0,transparent 30px);
Copier après la connexion
Le principe de cette méthode est : préciser la couleur la plus foncée du fond, et ajuster d'autres couleurs similaires dans l'article avec transparence

6. Exemple complet

Les rendus sont rassemblés ici, correspondant aux styles suivants :


2016531113058955.png (1190×539)

.stripes {   
    height: 250px;   
    width: 375px;   
    float: left;   
    margin: 10px;   
    -webkit-background-size: 50px 50px;   
    -moz-background-size: 50px 50px;   
    background-size: 50px 50px; /* 控制条纹的大小 */
    -moz-box-shadow: 1px 1px 8px gray;   
    -webkit-box-shadow: 1px 1px 8px gray;   
    box-shadow: 1px 1px 8px gray;   
}
Copier après la connexion
.horizontal {   
    background-color: #0ae;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}
Copier après la connexion
.vertical {   
    background-color: #f90;   
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}
Copier après la connexion
.picnic {   
    background-color:white;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
}
Copier après la connexion
Copier après la connexion
.picnic {   
    background-color:white;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
}
Copier après la connexion
Copier après la connexion
.angled-135 {   
    background-color: #c16;   
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,   
                            color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),   
                            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),   
                            color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),   
                            to(transparent));   
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
}
Copier après la connexion
.checkered {   
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),   
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));   
    background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      -moz-linear-gradient(45deg, transparent 75%, #555 75%),   
                      -moz-linear-gradient(-45deg, transparent 75%, #555 75%);   
    background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      -o-linear-gradient(45deg, transparent 75%, #555 75%),   
                      -o-linear-gradient(-45deg, transparent 75%, #555 75%);   
    background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      linear-gradient(45deg, transparent 75%, #555 75%),   
                      linear-gradient(-45deg, transparent 75%, #555 75%);   
}
Copier après la connexion
Code HTML : 

<p class="horizontal stripes"></p>
<p class="vertical stripes"></p>
<p class="picnic stripes"></p>
<p class="angled stripes"></p>
<p class="angled-135 stripes"></p>
<p class="checkered stripes"></p>
Copier après la connexion
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

L'effet de la navigation dans les menus basée sur la transition des attributs CSS3

Transformer le rendu du modèle en analyse CSS3

Une introduction complète à l'ombre de texte de police intégrée aux marques d'omission de couleur dégradé 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!

Étiquettes associées：
css 背景
source：php.cn
Article précédent：Créer un effet de navigation dans le menu basé sur la transition d'attribut CSS3 Article suivant：Code complet pour développer un jeu de ballon avec javascript et css3
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
Depuis 2024-04-06 20:57:16
0
1
487
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！