recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment utiliser un div transparent pour obtenir un effet de flou d'arrière-plan de page

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粉908643611P粉908643611485 Il y a quelques jours526

répondre à tous(1)je répondrai

  • P粉394812277

    P粉3948122772023-09-15 11:55:28

    Essayez ce qui suit, en utilisant CSS backdrop-filter: blur属性，并更改background-color的opacity : 

    <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>

    répondre
    0
  • Annulerrépondre