Question

所以..

我创建了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>

任何建议......谢谢

Answer 1

将您想要显示的图像的位置更改为相对或绝对我不记得究竟是什么，我现在会解决它...

Answer 2

<div style="background-image:url('image.jpg');"}
<img src="image2.jpg" position:relative; left:-20px;/>
</div>

Answer 3

在背景图像上将z-index更改为0，在要显示的图像上更改为99。这可以通过以下方式完成：

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

这应该将图像置于背景之上希望这会有所帮助：）

css背景涵盖图像

3 个答案: