我有一个图像背景全屏宽度和高度。
我想模糊它,除了屏幕中心的固定方形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/
单击正文时,框会调整大小,但我希望它变为全宽,图像位于同一位置。
答案 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>