html - 背景样式

Question

我必须实现所附图片所显示的内容

带有蓝色滤镜的图像是滚动横幅的一部分(使用 bxslider)。箭头必须显示其下方的图像，如附图所示

到目前为止，我已经设法将箭头添加为具有白色背景的伪元素，但我看不到如何在箭头后面添加透明背景...

.bx-wrapper:after {
    position: absolute;
    bottom: 0px;
    display: block;
    content: "" ;
    font-size: 25px;
    width: 100%;
    text-align: center;
    background: white url('https://cdn1.iconfinder.com/data/icons/general-ui-outlined-thick/24/chevron-down-512.png') no-repeat center center;
    background-size: 10px 20px;
    width: 100%; 
    height: 20px;
    text-align: center;
}

看看 fiddle

Answer 1

您可以尝试使用 radial-gradient 来解决它.我向您发布了一个使用 2 个伪元素的解决方案:一个用于管理透明背景，一个用于管理箭头。

$('.bxslider').bxSlider({
  controls : false, 
  auto : true, 
  pause : 10000
});

.my-slider {
  list-style: none;
}

img {
   width: 100%;
   height: auto;
}


li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(1, 176, 169, 0.75);
}
    
.bx-wrapper::after,
.bx-wrapper::before{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 20%;
}

.bx-wrapper::after {
    bottom: 0;
    background: radial-gradient(circle at 50% 0, transparent 10%, white 10.1%);
}

.bx-wrapper::before{
    bottom: 8%;
    background: url('https://cdn1.iconfinder.com/data/icons/general-ui-outlined-thick/24/chevron-down-512.png') no-repeat center center;
    background-size: 6%;
    z-index: 1;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet"/>

<ul class="my-slider bxslider">
  <li><img src="http://via.placeholder.com/350x150&text=Slide 1" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 2" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 3" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 4" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 5" alt=""></li>
</ul>