Créez rapidement des images d'arrière-plan floues avancées avec CSS-tutoriel CSS-php.cn

Créez rapidement des images d'arrière-plan floues avancées avec CSS

藏色散人

Libérer： 2021-08-19 11:24:31

original

2498 Les gens l'ont consulté

Voulez-vous que votre page Web soit haut de gamme ? Vous souhaitez augmenter le nombre de visites de lecture sur votre page Web ? Voulez-vous que vos utilisateurs soient attirés par votre page au premier coup d’œil ? Alors ne manquez pas cet article ! Après tout, tout le monde peut apprendre à créer une image d’arrière-plan flou haut de gamme, simplement et rapidement !

Sans plus attendre, commençons par le texte principal !

Comme le titre l'indique, ce que nous allons vous présenter aujourd'hui est de créer une image d'arrière-plan flou via CSS, adaptée à l'arrière-plan de votre page de blog personnel et de votre site Web.

J'ajouterai directement le code ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .bg-image {
        /* 所使用的图像 */
        background-image: url("001.jpg");

        /* 添加模糊效果 */
        filter: blur(8px);
        -webkit-filter: blur(8px);

        /* 完整的高度 */
        height: 100%;

        /* 中心和缩放图像*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 将文本放置在页面/图像的中间 */
    .bg-text {
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0, 0.4); 
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
</style>

</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
    <h2>欢迎来到</h2>
    <h1 style="font-size:50px">虚拟现实</h1>
    <p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>

Copier après la connexion

L'effet est comme le montre l'image ci-dessous :

Créez rapidement des images darrière-plan floues avancées avec CSS

(l'image de fond vient d'Internet, désolé pour l'infraction)

Que diriez-vous ! L'effet n'est-il pas génial !

Donc, dans le code ci-dessus, je vais vous présenter plusieurs attributs CSS clés :

L'attribut filter définit l'effet visuel (par exemple : flou et saturation) de l'élément (généralement Créez rapidement des images d'arrière-plan floues avancées avec CSS ) Dépenser). filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

注：旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

border简写属性在一个声明设置所有的边框属性。

border-width：规定边框的宽度。
border-style：规定边框的样式。
border-color：规定边框的颜色。
inherit：规定应该从父元素继承 border 属性的设置。

Copier après la connexion

background

Remarque : L'attribut "filtre" non standard pris en charge par les anciennes versions d'Internet Explorer (4.0 à 8.0) est obsolète. Les navigateurs IE8 et versions antérieures utilisent généralement l'attribut opacity.

L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. La propriété raccourcie border définit toutes les propriétés de bordure dans une seule déclaration. La propriété raccourcie

background-color：规定要使用的背景颜色。	
background-position：规定背景图像的位置。	
background-size：规定背景图片的尺寸。	
background-repeat：规定如何重复背景图像。
background-origin：规定背景图片的定位区域。	
background-clip：规定背景的绘制区域。	
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。	
background-image：规定要使用的背景图像。	
inherit：规定应该从父元素继承 background 属性的设置。

Copier après la connexion

background définit toutes les propriétés d'arrière-plan dans une seule déclaration. 🎜rrreee🎜La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "🎜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!