html - 在 bx-slider 中向图像添加框阴影

Question

我正在尝试自定义 bxslider，一个流行的 js 轮播插件，下面是我想要的样子:

我想添加的是每个图像底部下方的阴影和标题。截至目前，我已经对 css 进行了一些编辑，以删除默认的 bxslider 样式，例如边框等。

<强> FIDDLE HERE (这是我迄今为止所能实现的目标。)

现在，当然，如果您只想向图像添加框阴影，您可以轻松完成，就像这样::

<ul class="bxslider fade out">
          <li><img src="img/bp-1.jpg" /></li>
</ul>

CSS::

           .bxslider {
              margin: 0;
              padding: 0;
            }

            .bxslider li {
              position: relative;
              display: table;
            }

            .bxslider li:after {
              content: '';
              height: 5px;
              width: 90%;
              position: absolute;
              bottom:5px;
              left: 50%;
              -webkit-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              transform: translateX(-50%);
              -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              z-index: -1;
              background: rgba(0,0,0,.2);
            }

            .bxslider li img {
              width: 100%;
              max-width: 300px;
            }

P.S. 我需要使用伪元素，因为 box-shadow 不能是 img 宽度的 100%。

但是在 bx-slider 中向图像添加框阴影是一个挑战，原因如下::

• bx-slider 添加了一个名为 bx-viewport 的类，该类具有以下 css overflow:hidden;，因此永远不会看到 box-shadow。如果删除溢出:隐藏，您将看到阴影，但轮播将无法正常工作，隐藏的幻灯片将显示，并且您的页面将获得水平滚动条(不是我想要的)。

好的，我已经给了你背景，我的问题很简单，我只想向幻灯片中的图像添加一个box-shadow，你可以使用这个 FIDDLE 进行实验。

那么我该如何去做呢？

Answer 1

你可以在 JSFiddle 上查看我的方法。 我使用H3在里面添加了标题。

<li>
  <div class="img-wrapper">
     <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
  </div>
  <h3>X1 UNFOLDED</h3>
</li>