Question

我目前正在创建一个网站，我希望使用html / css / sinatra将托管在imgur上的图片放在黑色背景上。我试图为每个元素使用z-index，但是无法将图像作为在黑色背景的顶部（它被卡在黑色背景后面）。这是一个随机生成的报价网站。代码如下。

<body background="cartier.jpg">
<div class="container">

<script language="JavaScript" id="quote">
var Quotation=new Array()
Quotation[0] = "insert quote here";
Quotation[1] = "insert quote here";
Quotation[2] = "insert quote here";

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();

</script><br><br>

</div>
<div class="button" type="text/css">
  <a href="." STYLE="text-decoration: none">GIVE ME MORE GUIS</a>
</div>
<!-- <div class="picture" style="background-image: url(<%= randomized_background_image %>;">)>
</div> -->
<style type="text/css" class="image">
  html {
    background: url(<%= randomized_background_image %>) no-repeat center center fixed; 
  }
</style>

.container {
  /*margin: 20px auto;*/
  /*z-index: 3;*/
  width: 500px;
  height: 505px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  /*border: 1px dotted black;*/
  font-size: 50px;
  font-weight: bold;
  color: white;
}

#quote {
  z-index: 2;
}

/*.picture {
  position: fixed;
  z-index: 0;
  width: 900px;
  height: 505px;
  margin-top: -640px;
  margin-left: 430px;
  border: 1px dotted white;
/*  background: url("http://i.imgur.com/armyxnE.png")
*/

.image {
  z-index: 1;
}

style {
 z-index: 1;
}

html {
  z-index: 1;
}

.button {
   display:block;
   margin:0 auto;
   width: 389px;
   height: 46px;
   line-height: 46px;
   vertical-align: text-middle;
   text-align: center;
   color: #fffaff;
   font-family: sans-serif;
   font-size: 35px;
   font-weight: bold;
   font-style: normal;
   text-shadow: none;
}
.button > span {
   display: -moz-inline-block;
   margin: auto 0;
}


a:link {
    text-decoration: none;
    color: white;
    margin: auto 0;
}


body {
  /*position: absolute;
  z-index: 1;*/
  background-color: black;
  position: relative;
  z-index: 0;

}

和我的助手......

def randomized_background_image
  images = ["http://i.imgur.com/armyxnE.png", "http://i.imgur.com/DJF4CoC.png"]
  images[rand(images.size)]

结束

有人请帮忙!!!!

Answer 1

为什么不尝试将z-index：-1添加到您的背景中？

 background{
 position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Answer 2

我在理解您尝试做的事情时遇到了一些麻烦 - 但是您是说要将整个页面的背景设置为黑色，并将imgur图像叠加在其上？如果是这样，这可能就是你想要的。

而不是：

html {
    background: url(<%= randomized_background_image %>) no-repeat center center fixed; 
}

把：

body {
    background: #000 url(<%= randomized_background_image %>) no-repeat center center fixed;
}

#000将颜色设置为黑色，以便显示在图像后面的任何背景（例如，在具有透明度的图像的情况下）将显示为黑色。

将url图像放在黑色背景颜色html / css之上

}

结束

2 个答案: