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

Question

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

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

我检查过w3schools.com：How TO - Modal Images

但是，当我使用<img>标签时，这个方法很有用。如何在 div 秒内使用模态图像？

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

谢谢。

Answer 1

给 div class="someClass" 一个高度和宽度并设置 CSS 属性 background-size。这将使图像填满整个 space.

https://jsfiddle.net/ebLxg8po/

.someClass { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 50%;
  width:80%;
}

参考：https://css-tricks.com/perfect-full-page-background-image/

Answer 2

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

<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) 函数更改标题。如果你不想要标题，你可以像我在 div class 中写的那样写 changeCaption("o");。例如，如果您希望标题为 "Beautiful Flowers"，您可以写 changeCaption("Beautiful Flowers");.

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

Answer 3

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

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

Using modal image in <div style="background-image: url()">

css

html

image

responsive-images