Question

我有六张我的投资组合图片（小猫）。如何在湖壁纸上堆叠其中六个？我不希望那里有任何空白区域，只需要＆＃34;投资组合＆＃34;在湖顶上有六只小猫，然后是网站的灰色背景部分。

投资组合 - 如何在湖面上制作六张小猫照片？

关于 - 带有白色字体和个人资料照片的灰色背景（已经完成）

联络 - 联络表格（已完成）

我已经阅读了关于z-index的内容，并尝试了背景大小：封面和包含，但它似乎没有用......有人可以向我解释这一切吗？

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

你的小提琴有很多的问题：

您的.wallpaper选择器实际上没有匹配的元素;你没有wallpaper类的元素。
您正在使用Boostrap container-fluid，但未使用基于列的布局。此容器中您在Bootstrap行中不的元素（例如此背景）需要margin-left和margin-right -15px来容纳Boostrap。< / LI>
您的行的列数不是12。
大多数元素都会溢出容器。

至于不使用background-size的背景，那是因为background-size需要背景来操作，通过像background: url(background.jpg)这样的CSS属性添加。您只是使用<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）。您仍然希望保留负左边距，但是您希望将容器宽度{strong>加上 30像素设为100%以补偿填充和偏移。这可以通过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%;
}

希望这有帮助！：）

Answer 2

好的，感谢Obsidian Age给了我使用background-image而不是img src =＆＃34; ...＆＃34;的想法。所以我删除了img src并将其添加到：

header {
    background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
    padding: 85px 0;
    background-repeat: no-repeat;
}

这有效并解决了我遇到的问题。我已在我的codepen（https://codepen.io/jenlky/pen/GMENBL/）中进行了更新。干杯！

如何在img上叠加imgs？

2 个答案:

更新