Html+css：水平并排2个DIV，3张图片，其中2张透明背景？

问题描述 投票：0回答：1

有 3 张图片，其中 2 张具有透明背景（又名图层），还有 3 张图片，其中 2 张具有透明背景（又名图层），总共 6 张 - 2 个虚拟块，每个虚拟块有 3 张图片。 即BasePicL1、NonBasePicL2、NonBasePicL3为一个块，BasePicL4、NonBasePicL5、NonBasePicL6为另一块。 主要目的是通过某些条件“打开/关闭”每个“块”中的“层”。 例如，BasePicL1 - 显示，NonBasePicL2 - 隐藏，NonBasePicL3 - 显示。 其他块独立地相同。 这些工作通过 getElementID 并将属性“src”设置为适当的图片（在必要的层上）或设置为 1 像素空（在必要的层之外）以获得元素。

但是有必要将这2个方块水平并排放置。

为此，我制作了 2 个 DIV，每个 DIV 包含 3 张图片。这是代码：

<html>
    <head>
        <style> 
         .top-container {
            padding: 20px;
         }
         .img-container-external {
            position: absolute;
            top: 0;
            left: 0;
         } 
        .img-container-internal {
            position: absolute;
            top: 0;
            left: 355px";
            } 
        .overlay-img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    </head>
    <body> 
       <div class=""img-container-external"">
        <img id=""layer1"" class=""overlay-img"" src=""data:image/png;base64,Pic1">
        <img id=""layer2"" class=""overlay-img"" src=""data:image/png;base64,Pic2">
        <img id=""layer3"" class=""overlay-img"" src=""data:image/png;base64,Pic3">
    </div>
    <div class=""img-container-internal"">
        <img id=""layer1"" class=""overlay-img"" src=""data:image/png;base64,Pic4">
        <img id=""layer2"" class=""overlay-img"" src=""data:image/png;base64,Pic5">
        <img id=""layer3"" class=""overlay-img"" src=""data:image/png;base64,Pic6">
    </div> 
    </body>
</html>"

除了一件事之外，这符合我的需要。 包含 Pic4/Pic5/Pic6 的第二个 DIV 的位置是静态指定的，对于特定的图片宽度，在 355 的情况下 - 它是 PIc1/Pic2/Pic3 宽度。

block1 内的高度和宽度相同 - Pic1=Pic2=Pic3。 block2 内的高度和宽度相同 - Pic4=Pic5=Pic6。 block1 和block2 的大小可以不同。 我们的数据库中有很多这样的 :blcks: - 像素套件。

所有这些图片都加载到某个数据库中，并从中获取并显示在网页上。

有没有办法或者有没有办法仅通过 Html+CSS 来做到这一点？ 也许可以更简单 - 在 1 DIV 内放置 2 个“块”。 但无论如何，我需要将 2 个“块”作为打开的书放置。

html css image transparent
1个回答
0
投票

您可以使用 flexbox 容器将图像块并排放置，然后对图像块使用 grid 来覆盖图像。

您的代码有多个错误：

  1. 属性值的每一侧都有两个引号。这可以是 读取为空值，后跟无法识别的属性。
  2. ID 值必须是唯一的（仅使用一次）但您使用相同的 ID 在两个图像块中。
  3. CSS 中错误的引号：
    left: 355px";

.img-container {
  display: flex;
}

.img-container-external,
.img-container-internal {
  display: grid;
}

.overlay-img {
  grid-area: 1/1;
}
<div class="img-container">
  <div class="img-container-external">
    <img id="layer1" class="overlay-img" src="data:image/png;base64,Pic1">
    <img id="layer2" class="overlay-img" src="data:image/png;base64,Pic2">
    <img id="layer3" class="overlay-img" src="data:image/png;base64,Pic3">
  </div>
  <div class="img-container-internal">
    <img id="layer4" class="overlay-img" src="data:image/png;base64,Pic4">
    <img id="layer5" class="overlay-img" src="data:image/png;base64,Pic5">
    <img id="layer6" class="overlay-img" src="data:image/png;base64,Pic6">
  </div>
</div>


可以通过使用后代组合选择器而不是类来减少标记

.img-container {
  display: flex;
}

.img-container div {
  display: grid;
}

.img-container img {
  grid-area: 1/1;
}
<div class="img-container">
  <div>
    <img id="layer1" src="data:image/png;base64,Pic1">
    <img id="layer2" src="data:image/png;base64,Pic2">
    <img id="layer3" src="data:image/png;base64,Pic3">
  </div>
  <div>
    <img id="layer4" src="data:image/png;base64,Pic4">
    <img id="layer5" src="data:image/png;base64,Pic5">
    <img id="layer6" src="data:image/png;base64,Pic6">
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.