需要在另一张背景图片上添加背景图片。

Question

我迄今为止还没有成功解决这个问题，所以我需要帮助。我想做的是让一个背景图片适配平板电脑。里面有一个表格和一个右上角的标志，但现在我想把一个透明的标志放在背景上，只占屏幕的一半。标志是一只鹰，但我只想让它的一半出现在背景上。鹰必须在背景（透明）的顶部，但也必须在表格后面。有什么想法？建议？关于代码方面？

简单来说，就是要在另一个背景图片（透明）上覆盖一个背景图片，并且只覆盖屏幕的一半。

谢谢。

body { width: 100%; height:100%; display: -webkit-box; display: -moz-box; display: box; text-align:center;

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;
 }

- Sergio

---

你能分享一下你目前尝试过的代码吗？最好附上一些代码（可以用fiddle）。 - Bobo

为什么不直接改变鹰的不透明度并将其放置在您想要的任何位置呢？ - brbcoding

这个有用吗：http://www.css3.info/preview/multiple-backgrounds/ - andi

谢谢！问题已解决！我该怎么做才能将它仅定位在左侧（只显示图像的一半）？ - Sergio

@Sergio 我会将它定位于 left:0; transform:translateX(-50%)，关于你在上面评论中提出的最后一个问题。 - Maoritzio

Answer 1

有两个选项，要么使用CSS3多重背景：

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

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

- Lost Left Stack

---

我的背景没有固定的位置，我该如何让鹰只覆盖背景的一半（从左到右）？代码应该放在哪里？ - Sergio

它只覆盖了一半是什么意思？鹰有多大？你能给我展示一下它当前的截图吗？ - Lost Left Stack

如何使它们固定不变？ - Björn C

Answer 2

如果没有看到代码，很难区分你想要什么，但是如果我试图给你一个答案，我会建议你简单地使用body标签设置背景，然后在其下方设置一个绝对定位的div。之后，你的内容应该像平常一样。

- Chad

Answer 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>

- hungerstar