html - 如何在 img 之上堆叠图像？

Question

我有六张我的投资组合图片(小猫)。如何将其中的六个堆叠在湖墙纸上？我不希望有任何空白，只有“Portfolio”这个词和湖顶上的六只小猫，然后是网站的灰色背景部分。

作品集 - 如何在湖上 img 上制作六张小猫照片？

关于 - 灰色背景，白色字体和个人资料图片(已完成)

联系 - 联系表(已完成)

我已经阅读了有关 z-index 的内容，并尝试了 background-size: cover 和 contain，但它似乎不起作用...任何人都可以向我解释这一切吗？

HTML

<header id="portfolio" class="container-fluid">
    <div class="container">
        <h1 class="font-italic">Portfolio</h1>

        <div class="row">
            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
            </div>
        </div>

        <div class="row portfolio-buffer">
            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
            </div>

            <div class="col-md-4"> 
                <img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
            </div>

            <div class="col-md-4">
                <img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
            </div>
        </div>

    </div>
</header>

CSS

.portfolio-buffer {
   margin-top: 30px; 
}

section {
   padding: 85px 0;
}

footer {
   padding: 40px 0;
}

#portfolio > img {
   margin-left: -15px; /* Compensate for the container */
   width: calc(100% + 30px); /* Compensate for the container */
}

https://codepen.io/jenlky/pen/GMENBL/

Answer 1

你的 fiddle 有许多问题:

1. 你的 .wallpaper选择器实际上没有匹配的元素；你没有类为 wallpaper 的元素.
2. 您正在使用 Boostrap 的 container-fluid , 但不使用基于列的布局。此容器中不在 Bootstrap 行中的元素(例如此背景)需要具有 margin-left和 margin-right的 -15px以适应 Boostrap。
3. 您有一些行的组合列数不是 12。
4. 大多数元素溢出它们的容器。

至于后台不能用background-size ，那是因为 background-size需要一个 background 来操作，通过 CSS 属性添加，如 background: url(background.jpg) .您只是在使用 <img>标签。

话虽如此，您需要做的就是确保您的图像具有 max-width的 100% , 以确保它保持在范围内。您可能还希望将其固定到页面上，这可以通过 position: fixed 来完成。 .

我已经根据您当前的结构创建了一个新的选择器，并添加了相关属性:

#portfolio > img {
  margin-left: -15px; /* Compensate for the container */
  margin-right: -15px; /* Compensate for the container */
  max-width: 100%;
  position: fixed; /* Optional */
}

这可以看出工作 here .

请注意，您可能需要添加 max-width: 100%;和 max-height: 100%; 所有图像，以确保它们不会超出容器范围。

更新

为了让背景只覆盖投资组合部分，您需要删除 position: fixed (给它默认位置 relative )。你仍然想保留负的左边距，但你会想要让它成为 100%容器的宽度 加上 30 像素以补偿填充和偏移。这可以通过 CSS 计算来完成:

#portfolio > img {
  margin-left: -15px; /* Compensate for the container */
  width: calc(100% + 30px); /* Compensate for the container */
}

我创建了一支新笔来展示这个 here .

再次注意，您可能想要设置一个 max-width的 100%在所有 图像上，您应该设置margin-left (技术上是 margin-right )直接位于 Bootstrap 列下的所有元素。例如，猫可以用:

.col-md-4 > img.img-absolute {
    margin-left: -15px;
    margin-right: -15px;
    max-width: 100%;
}

希望对您有所帮助! :)