0

スライドして青い背景で表示するセクションがあります。左上隅に写真を入れようとしていますが、ほとんど見えず、青い背景が消えます。

HTML の一部:

<header id="main">
    <a href="#" id="stackoverflow" class="icons"></a>
</header>
<section id="stack" class="news"></section>

jQuery:

$('#stackoverflow').click(function(){
    $('#stack').toggle('slow', $st);
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat', 'position':'absolute', 'z-index':'1'});
});

CSS:

#stack{
float: left;
}

.news{ 
position: absolute;
z-index: -1; 
width: 600px;
background-color: #0000FF;
padding: 10px;
border-radius: 10px;
box-shadow: 3px 2px 3px #000;
}

.news a{
position: absolute;
text-decoration: none;
color: #fff;
}

.news a:hover{
color: #dc692e;
}

.news td{
padding: 5px 10px;
border-bottom: 2px #fff solid;
}

隅に画像を配置しようとしないと、次のようになります。ここに画像の説明を入力

隅に画像を追加しようとしたときの画像は次のとおりです。ここに画像の説明を入力

ありがとうございました！

4

1 に答える 1

4

青い背景が消えている理由は、実際の背景を上書きしたためです。あなたはこれであなたの後に何を得ることができるはずです:

$('#stackoverflow').click(function(){
    $('#stack').toggle('slow', $st);
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat BLUE', 'position':'absolute', 'z-index':'1'});
});

また、ここに画像を背景として配置するので、テキストが画像の上に重ならないように、要素の上部にパディングを追加することをお勧めします。

これに対するより良い解決策は、実際にその画像を特定の要素に挿入することです。いいえ:

$('#stack').prepend('<img id="theImg" src="theImg.jpg" />')
于 2013-06-20T18:44:17.583 に答える