在 <div style="background-image: url()"> 中使用模态图像
Using modal image in <div style="background-image: url()">
我正在尝试在我的响应式网站中使用模态图像。
我的图像在 divs 中作为背景图像。
喜欢;
<div class="someClass" style="background-image: url(image.jpg)"></div>
我检查过w3schools.com:How TO - Modal Images
但是,当我使用<img>
标签时,这个方法很有用。如何在 div 秒内使用模态图像?
我需要使用 div,因为没有它我的网站将无法正常工作。
谢谢。
给 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/
我稍微努力一下就解决了我的问题。我用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");
.
我希望我帮助了别人。谢谢。
<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>
我正在尝试在我的响应式网站中使用模态图像。 我的图像在 divs 中作为背景图像。 喜欢;
<div class="someClass" style="background-image: url(image.jpg)"></div>
我检查过w3schools.com:How TO - Modal Images
但是,当我使用<img>
标签时,这个方法很有用。如何在 div 秒内使用模态图像?
我需要使用 div,因为没有它我的网站将无法正常工作。
谢谢。
给 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/
我稍微努力一下就解决了我的问题。我用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");
.
我希望我帮助了别人。谢谢。
<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>