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

时间:2018-06-14 13:40:32

标签: javascript html css

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

我想模糊它,除了屏幕中心的固定方形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/

单击正文时,框会调整大小,但我希望它变为全宽,图像位于同一位置。

3 个答案:

答案 0 :(得分:2)

这样的东西?

我在某种程度上使用了分层背景来模仿模糊,但你只需要使用相同的背景,其中一个是模糊的,一个是正常的。

此处的关键是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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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>