简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

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粉908643611388 Tage vor443

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