Question

我目前有这个

我希望它看起来像

我尝试了许多没有用的东西，请帮助我！

我正在使用猫头鹰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));
}

我所做的是添加更多＆＃34;锚定＆＃34;指向渐变，使其在中心的两个边框（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));
}

滑块 - 主动模糊

1 个答案: