无法为 bxSlider 'next/prev' 控件设置图像答案

【问题标题】：Unable to set image for bxSlider 'next/prev' controls无法为 bxSlider 'next/prev' 控件设置图像
【发布时间】：2015-06-11 21:45:34
【问题描述】：

问题背景：

我正在使用 bxSlider 在我的网站中实现一个画廊，如图所示：

问题：

我正在尝试将 prev 和 next 控件设置为带有 bxSlider 项目的 controls.png 图像文件中提供的上一个和下一个箭头，如图所示：

目前我无法设置这些图像，我的图像的上一个和下一个控件只是< >，如图所示（请注意：这些可以在画廊图片中看到这个问题的顶部）：

代码：

bxSlider 库的 HTML 标记：

  <div class="bxslider-controls">
            <span id="bx-prev4"><a class="bx-next"></a></span>
            <span id="bx-next4"><a class="bx-prev"></a></span>
        </div>
        <ul class="bxslider" id="bx4">
            <li>
                <img src="~/Images/wf1.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf2.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf3.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf4.jpg" alt="...">
            </li>
        </ul>

目前，我已将背景图片网址更改为 .bx-prev 和 .bx-prev bxSlider.css 类中的 CSS 样式上的 controls.png 文件（存储在我网站上的 Images 文件夹中）：

.bx-wrapper .bx-prev {
   left: 10px;
   background: url(~/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
   right: 10px;
   background: url(~/Images/controls.png) no-repeat -43px -32px;
}

以下 JQuery 用于控制 bxSlider 画廊图像，而不是 nextText 和 prevText 属性：

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,
        nextSelector: '#bx-next4',
        prevSelector: '#bx-prev4',
        nextText: '>',
        prevText: '<',

     });
   });

任何帮助找出我不能将controls.png 中的图像应用到 HTML 中的 prev 和 next 标记的任何帮助都会很棒。

更新：

名为 anchors 的新 CSS 样式：

.anchors{
    display:inline-block;
    height:50px;
    width:50px;
}

应用于标签：

<div class="bxslider-controls">
   <span id="bx-prev4"><a class="bx-next anchors"></a></span>
   <span id="bx-next4"><a class="bx-prev anchors"></a></span>
</div>

我已经从图像路径中删除了 ~：

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(/Images/controls.png) no-repeat -43px -32px;
}

现在输出：

可以看出内联间距已经生效，但图像仍然没有显示。

【问题讨论】：

控制锚是否占用空间？由于您将 BG 图像应用于锚点，因此您需要将锚点设置为块或内联块元素并为其指定宽度和高度。否则没有内容，它是 0 px 高和宽，你不会看到它的背景，
另外，还有其他 CSS 作用于这些元素吗？如果是这样，应用到它的样式和样式是什么。
Leeish 是正确的，您使用跨度作为链接，默认情况下是内联元素。您需要将它们显式设置为“inline-block”或“block”级别元素，并在它们上设置宽度/高度和/或填充，以便背景图像可以显示。
@Leeish 请使用新的 css 查看我的问题的编辑部分。我创建了一个新的自定义 CSS 样式类，称为 .anchors。这将显示元素设置为内联块，我给出了 50 像素的高度宽度。我还更改了将路径渲染到图像的方式。但问题仍然存在。
@SeanThompson 感谢您的回复。我已经采纳了您和 Leeish 所说的内容，并在标签上应用了新的样式来设置锚点的显示元素和大小。

标签： jquery html css bxslider

【解决方案1】：

试试：

.bx-wrapper .bx-prev {
    left: 10px;
    width: 32px; 
    height: 32px;
    background: url(~/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    width: 32px; 
    height: 32px;
    background: url(~/Images/controls.png) no-repeat -43px -32px;
}

【讨论】：

感谢您的回复，我已经应用了您的 CSS，并且没有更改图像不显示。
见我上面的评论。是否有其他 CSS 作用于这些元素，如果有，您可以粘贴它。在 bx css 文件的某处，相同的项目应用了一些 CSS。此外，我从未在 CSS 的图像路径中看到 ~。那有效吗？通常我只使用/ 和../ 作为相对路径。
我已经申请了您的第一条评论并更新了我的问题以显示我已应用的更改
您能否确认~ 在CSS 中引用图像时有效？我以前从未见过。
在我的 IDE (Visual Studio) 中，当我使用 ~.我现在已将其删除（如更新部分所示）。但问题仍然存在。

【解决方案2】：

我在 Rails 上使用 bxslider，它的工作原理是这样的：

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,

     });
   });

和css：

.bx-wrapper .bx-next {
  right: 10px;
  background: image-url('controls.png') no-repeat -43px -32px;
}

【讨论】：