Question

假设我有一个横幅图片组。

<div class="bannerWrap">
<div class = "banner style="left: 0px;">
<img src = "something.jpg"  id="a">
<img src="something2.jpg" id="b">

</div>
</div>

当我移动横幅图像时，只会更改横幅样式如果我想删除某个横幅位置的图像文件

有什么好主意吗？

Answer 1

您可以尝试使用CSS更改不透明度：

#a {
    opacity : 0;
}

Answer 2

在JS上尝试以下代码，删除id名称为a的图片。

$('#a').remove();

Answer 3

如果您想移动图片#a而不影响图片#b，请将图片#a设置为position:relative

这允许您修改图像#a相对于其原始位置的位置，而不会影响图像的位置#b

以下是MDN docs对position:relative所说的内容：

...元素根据正常流量定位   文档，然后根据值相对于自身偏移   顶部，右侧，底部和左侧。偏移量不会影响   任何其他元素的位置;因此，给予元素的空间   页面布局中的位置与静态位置相同。

这个值   当z-index的值不是auto时，创建一个新的堆栈上下文。   相对于表的影响 - * - 组，表行，表 - 列，   table-cell和table-caption元素未定义。

基本示例：

.bannerWrap {
  border: 1px solid red;
  background: #111;
  display: inline-block;
}

#a {
  position: relative;
  top: 40px;
  left: 200px;
}

<div class="bannerWrap">
  <div class="banner">
    <img id="a" src="https://unsplash.it/300/300" alt="Image #a">
    <img id="b" src="https://unsplash.it/300/301" alt="Image #b">
  </div>
</div>

如果您要完全删除图片#a而不影响布局，可以使用visibility:hidden

visibility:hidden上的

MDN docs：

...元素框是不可见的（未绘制），但仍会影响布局正常。如果它们可以看到该元素的后代将可见性设置为可见。元素无法获得焦点（例如当浏览选项卡索引时。）

基本示例：

.bannerWrap {
  border: 1px solid red;
  background: #111;
  display: inline-block;
}

#a {
  visibility: hidden
}

<div class="bannerWrap">
  <div class="banner">
    <img id="a" src="https://unsplash.it/300/300" alt="Image #a">
    <img id="b" src="https://unsplash.it/300/301" alt="Image #b">
  </div>
</div>

如何从横幅中删除一个图像？

3 个答案: