1

そう..

Web サイトの背景全体をカバーするように css 画像を作成し、HTML に画像を追加しました。画像はありますが、css の背景で覆われているため、表示できません。

CSS

{ 
margin: 0; 
padding: 0; 
}

html, body, #bg, #bg table, #bg td, #cont {
height:100%;
width:100%;
overflow:hidden;
}

#bg { 
position: relative; 
}

#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}

#bg td {
text-align:center;
vertical-align:middle;
}

#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}

#cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}

.box { 
margin: 0 auto; 
width: 400px;
padding: 50px;
background: white; 
padding-bottom:100px;
font: 14px/2.8 Georgia, Serif;
}

HTML

<!DOCTYPE html>
<html>

<head>


<meta charset="utf-8">



<title>Full Page Background Image | CSS #1</title>



<div style="background: url (C:\Users\***\Desktop\site\picture.png; z-index:1">
<img src="C:\Users\*****\Desktop\site\picture.png" position:relative; left:-20px;/>
</div>

<style>

    img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }

#page-wrap { position: relative; width: 400px; margin: 50px auto; padding:        20px;  background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
    p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
</head>

<body>

<img src="images/bg.jpg" class="bg">

<div id="page-wrap">

text


</div>

</body>

</html>

任意の提案...ありがとう

4

3 に答える 3

1

背景画像の z-index を 0 に変更し、表示する画像の z-index を 99 に変更します。これは次の方法で実行できます。

(background id) {
  z-index: 0  }
(image id) {
  z-index: 99  }

これにより、画像が背景の「上」に表示されます。
お役に立てれば ：）

于 2014-05-21T19:00:12.490 に答える