CSS：背景模糊（正方形除外）

Question

我有图像背景的全屏和全屏高度。

我想模糊它，除了屏幕中心的固定正方形div。 在按钮上单击，我有一个jquery脚本可以使固定的div方形完全占据屏幕的高度和宽度，从而消除模糊。

所以像这个教程：

https://codepen.io/ariona/pen/geFIK

然后才恢复原状。 这可能吗？

<div class="img-square">
    <div class="img-square-wrapper">
        <div class="img-square-image"></div>
    </div>
</div>

我在考虑以下html排列以实现此目的。

编辑：我没有说清楚，我想做以下工作：

https://jsfiddle.net/ox89m6zs/5/

当您单击主体时，该框将调整大小，但我希望它变为全宽，并且图像位于同一位置。

Answer 1

像这样吗？

我使用分层背景在某种程度上模拟了模糊，但是您只需要使用相同的背景即可：一个是模糊的，另一个是正常的。

这里的关键是background-attachment: fixed; 在这里阅读

 $(function() { $(".img-square-image").draggable(); }); 

 * { margin: 0; padding: 0; box-sizing: border-box; } .img-square { border: 1px solid; height: 300px; width: 300px; background-image: linear-gradient(0deg, #464646fc, #383333ab), url('http://via.placeholder.com/300x300'); background-repeat: no-repeat; background-attachment: fixed; position: relative; } .img-square-image { height: 10%; width: 10%; border: 1px solid lime; background-image: url('http://via.placeholder.com/300x300'); background-repeat: no-repeat; background-attachment: fixed; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="img-square"> <div class="img-square-image"></div> </div> 

---

编辑

 document.querySelector(".img-square-image").onclick = (e) => { e.target.classList.add('expand'); }; 

 * { margin: 0; padding: 0; box-sizing: border-box; } .img-square { height: 300px; width: 300px; background-image: linear-gradient(0deg, #464646fc, #383333ab), url('http://via.placeholder.com/300x300'); background-repeat: no-repeat; background-attachment: fixed; position: relative; } .img-square-image { height: 50%; width: 50%; top: 25%; left: 25%; background-image: url('http://via.placeholder.com/300x300'); background-repeat: no-repeat; background-attachment: fixed; position: absolute; transition: all .5s linear; } .expand { height: 100%; width: 100%; top: 0%; left: 0%; } 

 <div class="img-square"> <div class="img-square-image"></div> </div> 

Answer 2

如果我正确地理解了您，这就是您要搜索的内容：

https://codepen.io/itamarshdev/pen/oyeGKV

$(function() {
    $( ".box" ).draggable();
});

@import“ compass / css3”;

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);

$normal-img:"https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg";
$blurred-img:"https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg";

body{
    background-image:url($blurred-img);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;

    font-family:Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
}
.blurred-bg{
    background-image:url($normal-img);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.box{
    width:500px;
    height:300px;
left:-webkit-calc( 50% - 250px );
top:20%;
    position:absolute;
    border-radius:5px;
    @include box-shadow(0 20px 30px rgba(0,0,0,.6));
    border:1px solid rgba(255,255,255,.3);
    padding:20px;
    text-align: center;
    @include box-sizing(border-box);
    text-shadow:0 1px 1px rgba(0,0,0,.4);
display: flex;
transition: box-shadow .3s ease;

    &:active{
    cursor:move;
    @include box-shadow(0 20px 50px rgba(0,0,0,.9));
}

.content{
    margin: auto;
}
}
h1,h2,a,p{
    color:white;
    font-weight:100;

    .tinted &{
        color:black;
        text-shadow:0 1px 1px rgba(255,255,255,.2);
    }
}
h2{ font-size: 14px }
p{ 
margin: 20px;
&.related{
    text-transform: uppercase;
    font-weight: 700;
    color: #444;

    a{
    font-weight: 700;
    text-decoration: none;
    &:hover{
        text-decoration: underline;
    }
    }
}
}

<div id="box1" class="box blurred-bg tinted">
<div class="content">
    <h1>Blurred Background</h1>
        <h2>By <a href="http://ariona.net" rel="follow" target="_blank">Ariona, Rian</a></h2>
        <p>Drag this box to move around</p>
    <p class="related">See also: <a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged Dropdown Animation</a></p>  
</div>
</div>

Answer 3

如果我了解您的操作，则可以尝试在此模式下使用背景属性：

background:url($blurred-img) 95% 50%;