将 url 图像放在黑色背景颜色 html/css 的顶部答案

【问题标题】：Place url image on top of black background color html/css将 url 图像放在黑色背景颜色 html/css 的顶部
【发布时间】：2014-09-15 15:00:02
【问题描述】：

我目前正在创建一个网站，我想使用 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)]

结束

请大家帮忙！！！！

【问题讨论】：

我不想粗鲁，但你的问题写得很糟糕。我建议至少提供一个 JSFiddle 来帮助回答者检查您的代码并使用它。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案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 将颜色设置为黑色，因此显示在图像后面的任何背景（例如具有透明度的图像）都将显示为黑色。

【讨论】：