javascript 如何在Bootstrap工具提示中使用background-image?

axkjgtzd  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(249)

我尝试在Bootstrap工具提示中添加一个使用background-image属性的元素,但未显示图像。

<div class="big-panel">
    <a href="#" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="Background image: <span style='display: block; background-size: cover;width: 32px; height: 32px; background-image: url(test/image.png)'></span> <br>Regular image: <img src='test/image.png'>">Hover me for testing</a>
</div>

我在同一个工具提示中添加了一个常规的<img>标记,它工作得很好。我只是不能让background-image属性工作。这可能吗?

osh3o9ms

osh3o9ms1#

Bootstrap工具提示组件用于显示HTML内容,包括内联CSS样式。但是,它不支持通过工具提示的HTML内容中的background-image属性直接应用背景图像。
要实现在工具提示中显示背景图像的所需效果,可以使用一种解决方法,即将自定义CSS类应用于工具提示元素并在CSS文件中定义背景图像。
首先,向tooltip元素添加一个自定义类,例如custom-tooltip:

<div class="big-panel">
    <a href="#" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="Background image: <span class='custom-tooltip-background'></span> <br>Regular image: <img src='test/image.png'>">Hover me for testing</a>
</div>

然后,在CSS文件中,定义custom-tooltip-background类并设置背景图像:

.custom-tooltip-background {
    display: block;
    background-size: cover;
    width: 32px;
    height: 32px;
    background-image: url(test/image.png);
}

确保图像的路径(test/image.png)相对于CSS文件的位置是正确的。
使用这种方法,背景图像将应用于工具提示内容中具有custom-tooltip-background类的元素。

相关问题