在 <div style="background-image: url()"> 中使用模态图像

Question

我正在尝试在我的响应式网站中使用模态图像。我在 divs 中有我的图像作为背景图像。像;

 <div class="someClass" style="background-image: url(image.jpg)"></div>

我检查了 w3schools.com： 如何 - 模态图像

但是，当我使用 <img> 标记时，此方法很有用。如何在我的图像在 div 中实现的情况下使用模态图像？

我需要使用 div，因为没有它我的网站将无法正常工作。

谢谢。

原文由 kylethedeveloper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我稍微努力就解决了我的问题。我用javascript来解决它。我还在图片上添加了标题。我像这样编辑了 div 类：

 <div class="someClass" data-target="#myModal" data-toggle="modal"
onclick='changeImage("image.jpg"); changeCaption("o");' style="background-image: url(image.jpg)"></div>

在页面的末尾，我添加了我的模态；

 <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                        <div class="modal-body">
                            <img src="" class="img-responsive" id="modalImg">
                            <p id="imgalt" class="caption"></p>
                        </div>
                </div>
        </div>
</div>

如您所见， <img src> 和 <p> 标签是空的。我用一些 javascript 代码填充它们。让我们也看看：

 <script type="text/javascript">
    function changeImage(a) {
        document.getElementById("modalImg").src = a;
    }

    function changeCaption(id) {
         var img = document.getElementById(id);
            if (id === "o") {
                document.getElementById("imgalt").innerHTML = " ";
            }
            else {
                document.getElementById("imgalt").innerHTML = id;
            }

    }
</script>

在这里，每个ID都非常重要。确保你让他们一样。

所以 changeImage(a) 函数改变图像。在我的 div 标签中，我打开了“image.jpg”。

changeCaption(id) 函数更改标题。如果你不想要标题，你写 changeCaption("o"); 正如我在我的 div 类中写的那样。例如，如果您希望您的标题是“美丽的花朵”，您可以写 changeCaption("Beautiful Flowers"); 。

我希望我帮助了某人。谢谢。

原文由 kylethedeveloper 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<i class="img img _2sxw" style="background-image: url('https\3a //static.xx.fbcdn.net/rsrc.php/v3/yd/r/g5B1Sl4zvO-.png?_nc_x\3d dNBJ7UMY9cl');background-repeat:no-repeat;background-size:100% 100%;width:332px;height:200px"></i>

原文由 joujou j ab 发布，翻译遵循 CC BY-SA 4.0 许可协议