Question

编写代码的新手，需要帮助将图像堆叠在一起。

我正在尝试将图像叠加在另一个图像上（我希望将其作为背景）与右对齐。

<div class="container-fluid" id="special">
    <section id="fourth">
            <img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
            <img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
    </section>
</div>

即使尝试编写代码，我也缺乏CSS能力。目前发生的是img-services堆栈在bg-services之上并且右对齐。我需要将第一张图像堆叠在第二张图像上面。

感谢任何帮助。

Answer 1

这里是一个包含更多图片的相同项目的jsfiddle：http://jsfiddle.net/kizu/4RPFa/4570/ jsfiddle是一个很好的免费工具，可以使用代码来查看更改是如何工作的

所以你要使用内联块助手并将高度设置为：100％和vertical-align：中间两个元素。

<div class="container-fluid" id="special">
<section id="fourth">

<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg" 
alt="Greenteriors Moss Art" width="40%" height="40%" align="right" 
id="services">
</div>

<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg" 
alt="Greenteriors Moss Art" width="40%" height="40%" align="right" 
id="services">
</div>

</section>
</div>

我已经在你的元素周围添加了额外的div。现在你只需要将它添加到css文件中，告诉它如何处理这些新的div：

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */

    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

你想要玩弄它看起来你想要的样子。改变高度和宽度。 prob删除边框

Answer 2

＆＃13;

#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }

＆＃13;

<div class="container-fluid" id="special">
    <section id="fourth">
            <img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
    </section>
</div>

＆＃13;

需要图像在Div内堆叠在另一个上面

2 个答案: