jquery - slider - 主动模糊

Question

我现在有这个

我希望它看起来像

我尝试了很多方法都没有用，请帮助我!

我正在使用 Owl Carousel

我的 CSS:

#owl-slider .item{
    padding: 30px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.customNavigation{
  text-align: center;
}
.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.image-fade-left {
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0));
}

.image-fade-right {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
}

我的 html:

<div class="image-fade-right">
    <div class="image-fade-left">
        <div id="owl-slider" class="owl-carousel">
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
            <div class="item">
                <img class="lazyOwl" data-src="" alt="">
            </div>
        </div>
    </div>
</div>

完整代码:http://hastebin.com/hevogeqijo.xml

谢谢!

Answer 1

通过这样做，您可能只使用一个类而不是两个类来做到这一点:

.image-fade {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));
}

我所做的是为渐变添加更多“ anchor ”，使其在两个边框 (rgba(0,0,0,0)) 和透明 ( rgba(0,0,0,1)) 在中间。

或者，如果你想至少修改你的代码，试试这个:

.image-fade-left {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
}

.image-fade-right {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
}