」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在保持模糊背景的同時去除子元素的背景模糊?

如何在保持模糊背景的同時去除子元素的背景模糊?

發佈於2024-11-07
瀏覽:275

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

從子元素中刪除背景模糊

您有一個

,其背景圖像應用了模糊效果。但是,所有子元素也會受到這種模糊的影響,這是不想要的。本文提供了解決此問題的解決方案,讓您在保持背景影像的模糊效果的同時保留子元素的清晰度。

解決方案:建立疊加元素

要實現此目的,您可以在父元素中建立一個單獨的

並將背景圖像和模糊效果應用到這個新元素。然後,使用 z 索引值將此元素放置在現有子元素後面。

以下是修改後的 HTML 結構:

a div wih all sort of information

CSS:

.content {
    float: left;
    width: 100%;
}

.content .overlay {
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

在此設定中,.overlay 元素應用了模糊效果,而 .opacity 元素阻止此效果到達子元素,從而在模糊背景上產生清晰且聚焦的子元素。

最新教學 更多>
  • Spring Boot:Java 應用程式開發的革命
    Spring Boot:Java 應用程式開發的革命
    如果你用Java開發,你可能聽過Spring Boot。但如果您還不知道,請準備好發現最強大、最實用的工具之一,它徹底改變了 Java 應用程式的創建方式! 什麼是 Spring Boot? Spring Boot 是一個框架,它使 Java 應用程式的開發變得更加容易(而且更加容易!)。它消除...
    程式設計 發佈於2024-11-08
  • LESS CSS 偽元素選擇器中與號 (&) 的作用是什麼?
    LESS CSS 偽元素選擇器中與號 (&) 的作用是什麼?
    揭秘CSS 偽元素選擇器中的& 符號當在CSS 中遇到這樣的代碼時,很自然地想知道& 符號(&) 的意義) 字元:.clearfix { *zoom: 1; &:before, &:after { display: table; conte...
    程式設計 發佈於2024-11-08
  • 如何在沒有子查詢的情況下在 MySQL 中更新行並取得更新的 ID?
    如何在沒有子查詢的情況下在 MySQL 中更新行並取得更新的 ID?
    在 MySQL 中組合 SELECT 和 UPDATE 查詢將 SELECT 和 UPDATE 查詢組合成單一操作對於優化資料庫效能非常有用。在這種情況下,使用者希望組合以下查詢:SELECT * FROM table WHERE group_id = 1013 and time > 100;...
    程式設計 發佈於2024-11-08
  • 將 SQLite 遷移到 MySQL。
    將 SQLite 遷移到 MySQL。
    我介紹一下自己,我是 Alfredo Riveros,我已經學習程式設計多年了,我目前正在 Río Tercero 高等商業學院學習軟體開發高級技術員,下面我將描述我面臨的挑戰遭遇。 正如標題所說,我的目標是將 SQLite 資料庫遷移到 MySQL,這是由我正在接受的資料庫主題中的作業引起的。 ...
    程式設計 發佈於2024-11-08
  • 在 Mageia 9 上安裝 ASDF
    在 Mageia 9 上安裝 ASDF
    今天我們要在 Mageia 9 上安裝 ASDF。接下來的步驟是將外掛程式安裝到 PHP 和 Node.js。 要在版本 0.14.1 上安裝 ASDF,我使用了 Git ZSH 版本: git克隆 https://github.com/asdf-vm/asdf.git ~/.asdf --bra...
    程式設計 發佈於2024-11-08
  • 最佳化效能:為資料透視表選擇最佳資料來源
    最佳化效能:為資料透視表選擇最佳資料來源
    TL;DR: Syncfusion Pivot Table connects to multiple data sources, making it a versatile tool for data analysis. Selecting the right data source is cruc...
    程式設計 發佈於2024-11-08
  • 使用 Secrets Loader 輕鬆管理 Laravel 和 JS 項目
    使用 Secrets Loader 輕鬆管理 Laravel 和 JS 項目
    跨各种环境管理 API 密钥、令牌和凭证等敏感数据可能非常棘手,尤其是在开发和部署应用程序时。确保秘密在需要时安全地存储和获取,而不是将它们硬编码到版本控制中,对于维护安全性至关重要。 这就是为什么我创建了 Secrets Loader,这是一个 Bash 脚本,可以动态地将 AWS SSM 和 C...
    程式設計 發佈於2024-11-08
  • 如何在 Android 中正確實作 CheckBox 的偵聽器?
    如何在 Android 中正確實作 CheckBox 的偵聽器?
    Android 中的CheckBox 偵聽器Android 中的CheckBox 偵聽器在Android 中實作CheckBox 偵聽器時,必須解決使用標準時面臨的常見問題OnCheckedChangeListener類。 satView.setOnCheckedChangeListener(new...
    程式設計 發佈於2024-11-08
  • Firestore 如何優化社群網路時間軸以實現可擴充性?
    Firestore 如何優化社群網路時間軸以實現可擴充性?
    使用Firestore 優化社交網路時間軸在設計具有提要和關注功能的社交網路時,資料庫可擴展性對於處理潛在問題至關重要大型數據集。 Firebase 的即時資料庫帶來了可擴展性挑戰,特別是在儲存使用者時間軸的方法方面。要解決這些問題,請考慮過渡到 Firestore。 優化的資料庫結構Firesto...
    程式設計 發佈於2024-11-08
  • 如何解決將物件數組作為函數參數傳遞時的錯誤?
    如何解決將物件數組作為函數參數傳遞時的錯誤?
    類型提示:物件陣列將物件陣列作為參數傳遞給函數時,如果未指定參數類型。例如,考慮以下程式碼:class Foo {} function getFoo(Foo $f) {}嘗試將 Foo 物件陣列傳遞給 getFoo 將導致致命錯誤:Argument 1 passed to getFoo() must...
    程式設計 發佈於2024-11-08
  • 為什麼 iOS 裝置上缺少 CSS 捲軸?
    為什麼 iOS 裝置上缺少 CSS 捲軸?
    iOS上無法顯示有CSS Overflow的捲軸為iPad開發網站時,使用CSS屬性overflow: auto來啟用div內的捲軸可能無效。儘管兩指滾動手勢功能正常,但捲軸仍然隱藏。嘗試同時使用溢出:自動和溢出:滾動不會產生任何結果。 iOS行為不幸的是,溢位:自動和捲動都不會在iOS裝置上產生捲...
    程式設計 發佈於2024-11-08
  • Java中如何從執行緒操作傳回值?
    Java中如何從執行緒操作傳回值?
    執行緒操作回傳值在多執行緒程式設計中,執行緒之間的互動往往需要交換資料。常見的情況是嘗試檢索在單獨執行緒中執行的操作的結果。 請考慮下面的範例程式碼:public void test() { Thread uiThread = new HandlerThread("UIHandle...
    程式設計 發佈於2024-11-08
  • Python 簡介:)
    Python 簡介:)
    歷史 Python 由 Guido van Rossum 創建,首次發佈於 1991 年。它旨在優先考慮程式碼的可讀性和簡單性,從而提高開發人員的工作效率。 「Python」 的靈感來自 BBC 電視節目 「Monty Python's Flying Circus」,van...
    程式設計 發佈於2024-11-08
  • 學習 Go 結構最終如何讓我愛上編碼
    學習 Go 結構最終如何讓我愛上編碼
    「我仍然記得早期與代碼搏鬥的日子。 基本的東西?我正要到那裡。但後來出現了結構體,一切都變得模糊起來。我不斷地破壞東西,我的程式碼一團糟。我做錯了什麼? 直到我坐下來,學習了 Go 結構體的基礎知識,並開始有效地使用它們,事情才終於有了進展。那是轉捩點。突然間,程式碼變得更有組織、更有效率、更乾淨...
    程式設計 發佈於2024-11-08
  • MERN 堆疊仍然有效嗎?
    MERN 堆疊仍然有效嗎?
    Remember when the MERN stack was the Beyoncé of web development stacks? It was everywhere, and if you weren’t using it, you were probably missing out ...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3