模糊除懸停之外的所有內容

Question

我正在設計一個簡單的靜態網頁，並想做這個整潔的小效果但遇到了問題。

我想做什么：用照片覆蓋屏幕。 當懸停在屏幕中央的“不可見”容器時，模糊容器以外的背景。

我有 2 層（div），'bg' 和 'overlay'。 'bg' 包含一個將填滿屏幕的圖像，而 'overlay' 是中心的寬度/高度 600px/450px容器。 如果我只輸入“覆蓋的大小和位置”，它將只是一個透視容器，當“背景”模糊時，它看起來會模糊。

我可以在“覆蓋”中使用相同的照片作為背景，這樣“覆蓋”就不會被看透，只是背景頂部的一張照片。 這里的問題是，當我在“bg”上使用background-size: cover時，疊加背景照片在放大/縮小時與“bg”背景照片不匹配（無響應）。

有什么想法可以解決這個問題嗎？

注意： background-size: cover第23行被斜線

代碼筆

 :root { --url: url(https://i.imgur.com/2N39vV4.jpg); } body { margin: 0; padding: 0; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--url); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: 1s; //background-size: cover; } .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 37.5vw; height: 59.36675461741425vh; background: var(--url); background-position: center; background-repeat: no-repeat; z-index: 1; -webkit-transition: 1s; } .overlay:hover~.bg { -webkit-filter: blur(15px); } .overlay:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, .8); }

 <div class="bg"></div> <div class="overlay"></div>

Answer 1

添加到.bg一個偽元素（ ::before ）覆蓋屏幕，並具有相同的圖像，具有相同的位置。 使用clip-path()在中間切一個洞。 當疊加層懸停時模糊::before

 :root { --url: url(https://loremflickr.com/800/600); --c-width: 37.5vw; --c-height: 59.36675461741425vh; --c-left: calc(50% - var(--c-width) / 2); --c-right: calc(50% + var(--c-width) / 2); --c-top: calc(50% - var(--c-height) / 2); --c-bottom: calc(50% + var(--c-height) / 2); } body { margin: 0; padding: 0; } .bg, .bg::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--url) fixed no-repeat center; background-size: cover; } .bg::before { clip-path: polygon( 0% 0%, 0% 100%, var(--c-left) 100%, var(--c-left) var(--c-top), var(--c-right) var(--c-top), var(--c-right) var(--c-bottom), var(--c-left) var(--c-bottom), var(--c-left) 100%, 100% 100%, 100% 0% ); transition: filter 1s; transform-style: preserve-3d; content: ''; } .overlay { position: absolute; top: var(--c-top); left: var(--c-left); width: var(--c-width); height: var(--c-height); z-index: 2; transition: box-shadow 1s; } .overlay:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, .8); } .overlay:hover + .bg::before { filter: blur(15px); }

 <div class="overlay"></div> <div class="bg"></div>