如何将图像放在 HTML/CSS 中的图像之上？没有任何工作答案

【问题标题】：How to put image on top of image in HTML/CSS? Nothing's working如何将图像放在 HTML/CSS 中的图像之上？没有任何工作
【发布时间】：2014-04-24 04:28:44
【问题描述】：

我正在尝试拍摄一张图片，将其作为背景放置在屏幕上，然后在其顶部放置公司徽标，使其看起来像一张图片。我看过其他人的例子，那些给了我想要的背景，但是我想要在背景顶部的公司徽标显示在背景旁边而不是顶部。我尝试的任何方法似乎都不起作用。有人可以帮忙吗？ HTML：

<div id="Background">
<img src="images/background/background.png">
</div>

CSS：

div#Background
{
 background-image:url('images/background/background.png')
 background-repeat:no-repeat;
}

【问题讨论】：

如果你有一个样本可以玩会更容易。如果你能把你的结果放在jsfiddle.net
一开始看起来两个图像都是相同的路径。

标签： html css

【解决方案1】：

我会这样做。您需要为周围的 div 提供背景图像的尺寸：

HTML

<div class="background">
    <img class="logo" src="http://placehold.it/150x75/FF0000/FFF&text=Logo" alt="Company Name" />
</div>

CSS

.background
{
    position:relative; /*Any child elements can now be positioned relative to this element*/
    background-image:url(http://placehold.it/750x150&text=background);
    background-repeat:no-repeat;
    width:700px;    /*Width of background image*/
    height:150px;   /*Height of background image*/
}

示例：http://jsfiddle.net/8RC7U/

您可以通过多种不同的方式定位徽标：

边距

.logo
{
    margin-top: 10px;
    margin-left: 10px;
}

http://jsfiddle.net/8RC7U/1/

绝对定位

.logo
{
    position:absolute;
    top: 15px;
    right:30px;
}

http://jsfiddle.net/8RC7U/2/

这只是初学者。

最后一点，以下内容可能更适合屏幕阅读器，更适合 SEO：

HTML - 以文本形式包含公司名称

<div class="background">
    <h2 class="logo">Company Name</h2>
</div>

CSS - 将文本移出屏幕并再次使用背景图片

.background
{
    position:relative;
    background-image:url(http://placehold.it/750x150&text=background);
    background-repeat:no-repeat;
    width:700px;
    height:150px;
}

.logo
{
    text-indent:-9999px; /*Shift the text off screen*/
    width:150px; /*Width Of logo*/
    height:75px; /*Height of logo*/
    background-image:url(http://placehold.it/150x75/FF0000/FFF&text=Logo);
    margin: 10px 0 0 10px; /*Positioning top right bottom left*/
    display:inline-block;  /*Set to inline block so margins apply inside parent*/
}

示例：http://jsfiddle.net/8RC7U/3/

【讨论】：

【解决方案2】：

在块级元素（等）上使用 "background-image" CSS 属性作为背景 PNG，然后将 PNG 按钮放在该块元素内。

你可以这样试试：

CSS

<style type="text/css">
    div#Background
    {
    background-image:url('images/background/background.png')
    background-repeat:no-repeat;
    }
</style>

HTML

<div id="Background">
    <img src="images/background/background.png" />
</div>

如果您有任何疑问，请告诉我..

【讨论】：

【解决方案3】：

一个简单的解决方案是使用

z-index

使您的徽标的 Z-index 比背景 Z-index 更重要，例如（）

#background
{
   z-index:9
}
#logo
{
   z-index:99
}

这将帮助你完成你想要的。

希望对你有帮助

【讨论】：

z-index 对于现有的 html 来说是一个糟糕的解决方案。默认情况下，父元素的 z-index 低于其子元素。

【解决方案4】：

FIDDLE

HTML

 <div>
       <img src="http://placehold.it/350x150" class="img1">
       <img src="http://placehold.it/150x100" class="img2">
    <div>

CSS

div {
 position:relative;
}

.img1 {
  position:absolute;
  z-index:1;
  top:0; left:0;
}

.img2 {
  position:absolute;
  z-index:2;
  top:24px; left:100px;
    border: solid 2px;
}

【讨论】：

【解决方案5】：

如果您只想使用两张图片，最好的方法是

将 div 设置为背景，然后在 div 中加载图像。

<div id="Background">
<img src="images/background/background.png">
</div>

#Background
{
 background-image:url('images/background/background.png')
 background-repeat:no-repeat;
}

【讨论】：