Comment utiliser un div transparent pour obtenir un effet de flou d'arrière-plan de page
P粉908643611
P粉908643611 2023-09-14 21:09:28
0
1
503

J'ai le code d'une page Web et je souhaite flouter l'arrière-plan grâce à un div transparent. En fait, je veux rendre le div semi-transparent.

J'ai essayé d'ajouter un filtre de flou CSS au div, mais le résultat est que le texte à l'intérieur du div est également flou, ce qui n'est pas ce que je veux.

<body style="background-image: url('bg.jpg')">
  <div>
    Some text
  </div>
</body>
P粉908643611
P粉908643611

répondre à tous(1)
P粉394812277

Essayez ce qui suit, en utilisant CSS backdrop-filter: blur属性,并更改background-coloropacity :

<head>
  <style>
    body {
      background-image: url('bg.jpg');
    }

    .translucent-div {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      width: 300px;
      height: 200px;
      margin: 50px auto;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="translucent-div">
    一些文本
  </div>
</body>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal