Question

我有一个图像背景全屏宽度和高度。

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

就像这个教程：

只有这样才能恢复。这可能吗？

<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; Read about it here

$(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

如果我了解你做了什么，你可以尝试在这种模式下使用背景属性：

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

Answer 3

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

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>

CSS：除正方形外的模糊背景

3 个答案: