Question

我正在尝试推出一个响应式背景图片。基本上，我有负载值。比方说50％。所以我希望我的一半图像清晰，另一半要模糊。

之前从未这样做过，所以我有想法制作两张图片：一张是普通的，一张是模糊的。

HTML - 两个空div。那些div在容器流体div中，因此每个窗口的宽度变化都会调整大小，这很重要。

<div class="col-lg-9 left-header">
    <div class="overlay">
    </div>
    <div class="bg">
    </div>
</div>
<div class="col-lg-3 right-header">
  // some stuff
</div>

现在，其他一切都必须是js和css。所以我开始相应地设计我的div。模糊的bg，注意绝对定位：

.overlay {
    background:url('../img/overlay.jpg');
    height:580px;
    width:100%;
    background-position:right;
    background-size:cover;
    position:absolute;
    right:0;
}

非模糊bg

.bg {
    background:url('../img/bg.jpg');
    background-size:cover;
    background-position:right;
    height:580px;
}

正如你在jsfiddle https://jsfiddle.net/yqdx9vgc/中看到的那样，特别是在大宽度时会出现一个大问题。实际上，我想使用.overlay的width参数。但是，这两个背景封面图像的比例不同，所以效果不起作用。

理想情况下，最后，我想用jquery设置宽度。例如，如果我的值是50％，那么我告诉jquery将.overlay放在50％宽度。但是我的解决方案无法正常工作，我如何为不同div大小的背景图像保持相同的尺寸？ 保持响应效果

Answer 1

我用纯CSS实现了这个效果，享受：

https://jsfiddle.net/fk9rbgv5/1/

以下是代码：

＆＃13;

.unveil-container {
    width:100%;
    position:relative;
    overflow:hidden;
    background-size:100% 100%;
    background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
    padding:0;
    /* This is for keeping proportion - remove if you do not want */
    display: inline-block;
    width:100%;
}
/* this whole before is for proportion */
 .unveil-container::before {
    content:'';
    display: block;
    margin-top: 50%;
}
.overlay {
    background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
    height:100%;
    /* PLAY WITH WIDTH */
    width:50%;
    top:0;
    background-position:100% 0;
    background-size:200% 100%;
    position:absolute;
    left:50%;
    -webkit-filter: blur(5px);
}
.bg {
    position:absolute;
    left:0;
    top:0;
    width: 50%;
    background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
    background-size:200% 100%;
    background-position:0%;
    height:100%;
}

＆＃13;

<div class="col-lg-9 left-header unveil-container">
    <div class="overlay"></div>
    <div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>

＆＃13;

Answer 2

您可以设置2个元素，一个在另一个内，然后使用translate在相反的方向上进行翻译。

使用javascript可以轻松制作动画。

使用此布局，元素的宽度为100％，背景可以覆盖（或包含）

＆＃13;

var target1, target2, step;

function move ()  {
	target1.style.transform = "translateX(" + step + "%)";
	target2.style.transform = "translateX(-" + step + "%)";
	step -= 1;
	if (step < 0) step = 100;
}
function start ()  {
	target1 = document.getElementById('moving');
	target2 = target1.children[0];
	step = 50;
 
    setInterval(move, 20); 
}

＆＃13;

.base {
    width: 80%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    top; 0px;
    left: 0px;
    background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
    background-size: cover;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top; 0px;
    left: 0px;
    z-index: 2;
    overflow: hidden;
    transform: translateX(50%);    
}

.overlayimage {
    position: absolute;
    width: 100%;
    height: 100%;
    top; 0px;
    left: 0px;
    background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
    background-size: cover;
    transform: translateX(-50%);    
    -webkit-filter: blur(5px);   
    -webkit-filter: invert();   
}

＆＃13;

<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>

＆＃13;

我更改了您的过滤器以使其更加明显......

揭开流体宽度标题图像

2 个答案: