interface Web
tutoriel CSS
Comment flouter l'image d'arrière-plan avec CSS ? Introduction à la méthode de floutage des images d'arrière-plan en CSS
Comment flouter l'image d'arrière-plan avec CSS ? Introduction à la méthode de floutage des images d'arrière-plan en CSS
En voyant l'image d'arrière-plan floue, je pense que de nombreux amis penseront à utiliser PS pour obtenir cet effet. Alors, l'effet de flou de l'image d'arrière-plan peut-il être obtenu en utilisant CSS ? L'article suivant vous présentera comment définir le flou de l'image d'arrière-plan en CSS.
L'attribut filter est utilisé lors du flou de l'arrière-plan. Nous utilisons le flou dans l'attribut filter pour définir l'arrière-plan flou.
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="/static/imghw/default1.png" data-src="image/girl.jpg" class="lazy" alt="girl" style="max-width:90%" style="max-width:90%">
</body>
</html>L'effet de l'arrière-plan flou CSS est le suivant :
La méthode ci-dessus Utilisez simplement du CSS pour flouter l'image d'arrière-plan. Jetons un coup d'œil à une méthode légèrement plus compliquée. Bien sûr, nous utilisons également l'attribut filter
. >
<!DOCTYPE html>
<html>
<head>
<style>
.mbl {
width: 20em;
height: 20em;
background: url(image/girl.jpg);
background-size: cover;
overflow: hidden;
margin: 30px;
}
.text {
width: 18em;
height: 18em;
margin: 1em;
background: hsla(0, 0%, 100%, .4);
color: black;
text-align: center;
overflow: hidden;
position: relative;
}
.text::before {
position: absolute;
background: url(image/girl.jpg);
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
filter: blur(4px);
/* background: rgba(225, 0, 0, 0.5);*/
}
.text p {
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
position: relative;
}
</style>
</head>
<body>
<div class="mbl">
<div class="text">
<p>图片上面的文字内容</p>
</div>
</div>
</body>
</html>
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!
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
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment personnaliser l'image d'arrière-plan dans Win11
Jun 30, 2023 pm 08:45 PM
Comment personnaliser l’image d’arrière-plan dans Win11 ? Dans le nouveau système win11, il existe de nombreuses fonctions personnalisées, mais de nombreux amis ne savent pas comment utiliser ces fonctions. Certains amis pensent que l'image d'arrière-plan est relativement monotone et souhaitent personnaliser l'image d'arrière-plan, mais ne savent pas comment personnaliser l'image d'arrière-plan. Si vous ne savez pas comment définir l'image d'arrière-plan, l'éditeur a compilé les étapes pour. personnalisez l'image d'arrière-plan dans Win11 ci-dessous. Si vous êtes intéressé, jetez un œil ci-dessous ! Étapes de personnalisation des images d'arrière-plan dans Win11 : 1. Cliquez sur le bouton Win sur le bureau et cliquez sur Paramètres dans le menu contextuel, comme indiqué sur la figure. 2. Entrez dans le menu des paramètres et cliquez sur Personnalisation, comme indiqué sur la figure. 3. Entrez Personnalisation et cliquez sur Arrière-plan, comme indiqué sur l'image. 4. Entrez les paramètres d'arrière-plan et cliquez pour parcourir les images
Comment supprimer l'image d'arrière-plan dans les paramètres de personnalisation Win10
Dec 21, 2023 pm 02:31 PM
Chaque fois que l'arrière-plan du bureau utilisé dans le système Win10 est affiché dans l'image d'arrière-plan personnalisée dans les paramètres, certains utilisateurs souhaitent le supprimer, mais ne savent pas comment le faire. Cet article explique comment supprimer l'image d'arrière-plan personnalisée dans. Win10 partagé par ce site. Afficher les images d'arrière-plan du bureau utilisées : 1. Cliquez [clic droit] sur un espace vide du bureau et sélectionnez [Personnaliser] dans l'élément de menu qui s'ouvre. 2. Dans l'image de sélection en arrière-plan, vous pouvez afficher les arrière-plans du bureau ; vous avez utilisé Image ; supprimez l'image d'arrière-plan du bureau utilisée : Remarque : Cette opération implique la modification du registre. La modification du registre est risquée. Veuillez sauvegarder les données à l'avance. 1. Appuyez simultanément sur la combinaison de touches [Win+R]. pour ouvrir la fenêtre d'exécution et entrez la commande [regedit] ], puis cliquez sur [OK] 2 ;
Comment ajouter une image d'arrière-plan à Douyin Live Companion - Comment ajouter une image d'arrière-plan à Douyin Live Companion
Mar 05, 2024 am 09:16 AM
De nombreux utilisateurs qui diffusent en direct sur Douyin utiliseront le logiciel Douyin Live Companion, mais savez-vous comment ajouter une image d'arrière-plan au Douyin Live Companion. Voici la méthode d'ajout d'une image d'arrière-plan au Douyin Live Companion présentée par ? l'éditeur. Si vous êtes intéressés, les utilisateurs viennent jeter un oeil ci-dessous. Connectez-vous d’abord à Douyin Live Companion sur votre ordinateur, puis accédez à la page d’accueil. Sur la gauche, nous sélectionnons [Ajouter du matériel] sous [Scène 1]. Ensuite, il y aura une fenêtre pour ajouter des matériaux sur la page. Nous pouvons directement sélectionner la fonction [Image] et cliquer pour entrer. Nous ouvrirons ensuite une fenêtre où le matériel image est stocké localement. Nous devons sélectionner les images que nous souhaitons ajouter, puis cliquer sur le bouton Ouvrir dans le coin inférieur droit pour les ajouter. Après avoir ajouté l'image, nous devons utiliser le bouton gauche de la souris pour faire glisser l'image vers l'emplacement approprié.
Comment remplacer uniformément les images d'arrière-plan ppt
Mar 25, 2024 pm 04:16 PM
Le remplacement unifié des images d'arrière-plan PPT est une opération importante pour améliorer le style visuel des présentations et peut être réalisé par deux méthodes principales : le remplacement du masque des diapositives et le remplacement par lots. Le remplacement du masque des diapositives implique la suppression de l'image d'origine et l'insertion d'une nouvelle image dans le masque, s'appliquant ainsi à toutes les diapositives. La fonction de remplacement par lots remplace directement les images d'arrière-plan de toutes les diapositives de la présentation. Une image d'arrière-plan unifiée améliore non seulement votre présentation, mais améliore également l'attention de votre public. Il est important de choisir des images de haute qualité et cohérentes avec le thème, et vous devez faire attention à l'ajustement des détails tels que la transparence et la taille. De plus, PPT fournit également de riches options de configuration d'arrière-plan, telles que des dégradés, des textures et des motifs, qui peuvent être personnalisées en fonction des besoins.
Introduction à la définition des images d'arrière-plan dans WPS Office 2016
Mar 29, 2024 pm 10:21 PM
1. Démarrez la démonstration WPS, comme indiqué sur la figure. 2. Cliquez sur le bouton [+] pour créer une nouvelle diapositive, comme indiqué sur la figure. 3. Cliquez avec le bouton droit et sélectionnez [Arrière-plan], comme indiqué sur la figure. 4. Dans les options de remplissage de la page [Propriétés de l'objet], sélectionnez [Remplissage d'image ou de texture], comme indiqué sur la figure. 5. Dans la source de l'image, cliquez sur Fichier local[, comme indiqué dans la figure. 6. Dans la boîte de dialogue, sélectionnez l'image que vous souhaitez insérer et cliquez sur le bouton ] pour ouvrir le bouton [, comme indiqué dans l'exemple. 7. Ceci termine le paramétrage de l'image d'arrière-plan pour la démonstration WPS. L'effet est comme indiqué sur l'image.
Comment définir une image d'arrière-plan ppt
Mar 25, 2024 pm 04:12 PM
La définition d'une image d'arrière-plan PPT peut ajouter un effet visuel et attirer votre présentation. Ce didacticiel explique comment choisir la bonne image, configurer une image d'arrière-plan et l'ajuster en fonction du contenu de votre présentation. En suivant ce guide, vous pouvez facilement créer des images d'arrière-plan impressionnantes pour PPT et améliorer l'effet global de votre présentation.
Comment changer l'image d'arrière-plan dans Chi Chi Down ? Comment changer l'image d'arrière-plan dans Chi Chi Down
Mar 04, 2024 pm 03:30 PM
Vraisemblablement, tous les utilisateurs ici connaissent le logiciel Chirp Down, mais savez-vous comment changer l'image d'arrière-plan de Chirp Down ? L'article qui vous est présenté dans ce chapitre explique comment changer l'image d'arrière-plan de Chirp Down. , veuillez lire l'article suivant Jetez un oeil. Cliquez sur l'icône "Chirp Down" sur le bureau de l'ordinateur pour ouvrir le logiciel. Entrez dans l’interface principale de Chi Chi Down et cliquez sur Paramètres. Dans les paramètres, abaissez complètement la barre de progression. (Comme indiqué ci-dessous) Sous Fonctions avancées, cliquez sur Personnaliser l'image d'arrière-plan. Recherchez l'image d'arrière-plan que vous aimez dans le fichier informatique et cliquez pour l'ouvrir.
Comment définir toutes les applications pour l'image d'arrière-plan ppt
Jan 07, 2021 pm 04:58 PM
Méthode de paramétrage : 1. Ouvrez le fichier PPT qui doit être modifié ; 2. Cliquez sur le bouton "Propriétés de l'objet" pour ouvrir le menu "Propriétés de l'objet", définissez "Remplir" sur "Remplissage d'image ou de texture", puis cliquez sur "Veuillez sélectionnez une image " " et sélectionnez " Téléchargement local " ; 3. Sélectionnez l'image d'arrière-plan et cliquez sur le bouton " Ouvrir " ; 4. Cliquez sur le bouton " Appliquer à tous ".
