帶有模糊深色背景的純CSS燈箱

Question

我不能爲我的生活弄清楚如何在不影響我的燈箱圖像的情況下模糊昏暗的背景。任何幫助將不勝感激，因爲我仍然試圖學習如何使用：目標功能。我計劃有幾個不同的圖像，以便當我單擊每個人時，這個燈箱效果將與純css3一起使用。此外，任何額外的幫助，使這更多的瀏覽器友好沒有JavaScript將是偉大的！截至目前代碼的作品只是通過黑暗的背景來創建燈箱。

HTML

​​

CSS

.page{ 
width: auto; 
height: auto; 
padding: 20px; 
} 
.pressbox { 
    width: 0; 
    height: 0; 
    position: fixed; 
    overflow: hidden; 
    left: 0; 
    top: 0; 
    z-index: 9999; 
    text-align: center; 
    background: rgba(0,0,0,0.7); 
} 
.pressbox img { 
    opacity: 0; 
    padding: 10px; 
    background: #ffffff; 
    margin-top: 100px; 
    -webkit-box-shadow: 0px 0px 15px #444; 
    -moz-box-shadow: 0px 0px 15px #444; 
    box-shadow: 0px 0px 15px #444; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    transition: opacity .25s ease-in-out; 
} 
.pressbox:target { 
    width: auto; 
    height: auto; 
    bottom: 0; 
    right: 0; 
} 
.pressbox:target img { 
    opacity: 1; 
} 
.page:target { 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 
} 

Answer 1

你正在嘗試目前實現是不可能的只是CSS，但它是未來。

https://webkit.org/blog/3632/introducing-backdrop-filters/

Answer 2

做到這一點VA CSS不僅是個好主意，但讓我們想象它是。

要單擊打開/關閉圖像並在頁面的不同部分觸發不同樣式，可以使用表單元素（如收音機（或複選框））來幫助您。

inputs就在HTML之前。

通過屬性for將頁面中的任意位置縮進label s與input s相關。

Somehwere next（after）input s在代碼中你的#overlay持有大圖像，自己包裹成label。 #overlay當然不站在包裝模糊。

現在，一旦有了這樣的結構，就可以使用:checked ~選擇器來應用希望放置DOM /文檔的樣式。

DEMO但是，我不建議使用這種結構至極的意義越來越混亂，一旦風格不加載，即使它是樂趣CSS戲耍;）

:checked~.wrapper { 
 
    filter: blur(5px); 
 
} 
 

 
#overlay label { 
 
    display: none; 
 
} 
 

 
:checked ~ #overlay { 
 
    position: fixed; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 

 
#a1:checked ~ #overlay label.a1 
 
/* add each other selector here a2, a3, .... */{ 
 
    display: block; 
 
    margin: auto; 
 
    height: 80%; 
 
    width: 80%; 
 
    display: flex; 
 
} 
 

 
label img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    margin: auto; 
 
    vertical-align:middle; 
 
} 
 
.img { 
 
    font-size:2em; 
 
    color:red; 
 
    } 
 
.img img { 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
input[id^=a] { 
 
    position: absolute; 
 
    right: 120%; 
 
}

<input id="a1" type="radio" name="test" /> 
 
<!-- as any needed --> 
 

 

 
<div id="overlay"> 
 
    <label for="a" class="a1"> 
 
    <img src="http://lorempixel.com/500/500/nature/1" /> 
 
    </label> 
 
    <!-- as any needed --> 
 
    <input id="a" type="radio" name="test" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <h1> test</h1> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
    <div class="img"> 
 
    My CSS lightbox image => 
 
    <label for="a1"> 
 
     <img src="http://lorempixel.com/50/50/nature/1" /> 
 
    </label> 
 
    </div> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
</div>