suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So verwenden Sie transparentes Div, um einen Seitenhintergrundunschärfeeffekt zu erzielen

Ich habe den Code für eine Webseite und möchte den Hintergrund durch ein transparentes Div verwischen. Eigentlich möchte ich das Div halbtransparent machen.

Ich habe versucht, dem Div einen Unschärfefilter-CSS hinzuzufügen, aber das Ergebnis ist, dass der Text innerhalb des Div ebenfalls unscharf ist, was nicht das ist, was ich möchte. 

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

Antworte allen(1)Ich werde antworten

  • P粉394812277

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

    尝试以下操作，使用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>

    Antwort
    0
  • StornierenAntwort