4

これまでのところ解決に成功していないので、助けが必要です。私がやろうとしているのは、タブレットに合う背景画像を用意することです。内部にはテーブルと右上のロゴがありますが、今は透明なロゴを背景に画面の約半分だけにしようとしています..ロゴはワシですが、半分だけ欲しいですそれを背景に。ワシは背景（透明）の上にある必要がありますが、テーブルの後ろにもある必要があります..アイデアはありますか？提案？コード的に？

基本的には、別の背景画像 (透明) の上に背景画像を配置し、画面の半分だけをカバーします。

ありがとう

本体 { 幅: 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;
 }

4

3 に答える 3

7

CSS3 の複数の背景を使用する 2 つのオプションがあります。

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

または、ワシを背景の上に配置しますposition:Absolute;

于 2013-08-09T18:18:20.540 に答える
0

コードを見ずにあなたが何をしようとしているのかを区別するのは難しいですが、私があなたに答えを与えることに突き刺すなら、bodyタグを使用して背景を設定し、そのすぐ下にdivを設定するだけです絶対に上位に位置します。その後、コンテンツは通常どおりに動作するはずです。

于 2013-08-09T18:09:56.807 に答える
0

この解決策は @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>
于 2013-08-09T18:22:40.313 に答える