需要背景图像而不是另一个背景图像答案

【问题标题】：Need background image over another background image需要背景图像而不是另一个背景图像
【发布时间】：2013-08-11 18:04:19
【问题描述】：

到目前为止，我还没有成功解决这个问题，所以我需要帮助。我想要做的是有一个适合平板电脑的背景图像。在里面我有一张桌子，还有一个右上角的标志，但现在我想在背景上设置一个透明的标志，只有屏幕的一半..标志是一只鹰，但我只想要一半它在背景上。老鹰必须在背景之上（透明），但也必须在桌子后面..想法？建议？代码明智？

基本来说，在另一个背景图像上放置一个背景图像（透明），并且只覆盖屏幕的一半。

谢谢

身体{ 宽度：100%；高度：100%；显示：-webkit-box；显示：-moz-box；展示：盒子；文本对齐：居中；
background:url(1xx.png);
-webkit-background-size: cover !important;
-moz-background-size: cover;
background-size: cover;
font-family: Arial, Times New Roman, sans-serif;
font-size: 20px; 
z-index:0; }  body{   display: table;     width: 100%;    } .box {
width: 75%;
height:90%;

margin-left:auto;
margin-right: auto;
margin-top:auto;
margin-bottom: auto;
 }

【问题讨论】：

你能发布你迄今为止尝试过的东西吗？一些代码（一个小提琴会很好）
为什么不直接改变老鹰的不透明度并将它放在任何你想要的地方？
有帮助吗：css3.info/preview/multiple-backgrounds
谢谢！解决了！我该怎么做才能将其仅定位在左侧（图像显示的一半）
@Sergio 关于您在上面评论中的最后一个问题，我会把它放在left:0; tranform:translateX(-50%)。

标签： html css background

【解决方案1】：

有两种选择，要么使用 CSS3 多背景：

background-image: url(eagle.png), url(background-image.png);
background-position: left top, center top;
background-repeat: no-repeat;

或使用position:Absolute; 将老鹰定位在背景上

【讨论】：

我的背景没有设置位置，我怎么做才能让鹰只覆盖背景的一半（从左到右）代码会去哪里？
只覆盖一半是什么意思？老鹰有多大？你能给我看一下它目前的截图吗？
如何解决这些问题？

【解决方案2】：

如果不看代码，很难区分你的目标，但如果我想给你一个答案，我会说只需使用 body 标签设置你的背景，然后在它下面设置一个绝对位于顶部的 div。之后，您的内容应该正常运行。

【讨论】：

【解决方案3】：

此解决方案与@ChadP 建议的相同，这里只是一些代码供您查看。我有很多假设，因为您没有太多代码可以使用。

http://jsfiddle.net/R4KUg/

CSS

body {
    background-image: url('http://lorempixel.com/1200/1200/');
    margin: 0;
}
header {
    height: 250px;
}
#eagle {
    background: transparent url('http://lorempixel.com/600/200/') no-repeat center center;
    height: 200px;
    width: 100%;
    position: absolute;
    top: 250px;
    opacity: 0.5;
}

HTML

<div id="eagle"></div>
<div id="wrapper">
    <header>
        <h1>A header</h1>
    </header>
    <table>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </table>
</div>

【讨论】：