使 HTML 正文背景图像透明

Question

我试图使我的背景图像透明，而页面的其余部分不透明，例如在非褪色 HTML 和 CSS 顶部的褪色背景图像。

我有一个 HTML 页面，使用 div 将图像作为背景。 以下是页面的简化版本：

<HTML>

<head>

    <style type="text/css">
        #backgroundImage {
            background-image: url('../Documents/images/Sea.jpg');
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.4;
            filter:alpha(opacity=40);
            height:100%;
            width:100%;
            z-index:0.1;
        }

        .main{
            height:500px;
            width:900px;
            margin:auto;
            background-color:green;
            z-index:1;
            opacity: 1;
            filter:alpha(opacity=100);

        }
    </style>


</head>


<body>

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

</body>

我在以下问题中找到了这个设置：

如何在不使内容（图像和文本）也透明的情况下使我网站的背景透明？

它几乎可以工作，除了整个页面都是透明的，而不仅仅是背景图像。

我曾尝试调整“主”div 上的 Z-index 和不透明度，但它不起作用。

我觉得这是一个简单的修复，但我看不到解决方案。

我也试过这个问题，但它似乎没有提供解决方案：

如果我有以下代码，如何在 CSS 中使我的背景图像透明？

和这个：

CSS背景图像不透明度？

我没有足够的声誉来张贴我正在努力实现的目标。

Answer 1

HTML：

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

CSS：

#backgroundImage{z-index: 1;}

#backgroundImage:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:100%;
    width:100%;
 }

.main{
   height:320px;
   width:320px;
   margin:auto;
   background-color:green;
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}

JSFIDDLE 演示

网站参考： http : //nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

Answer 2

您基本上想要做的是背景图像应该是水印。 最好的方法是：-

   <style>
div.image
  {
  width:500px;
  height:250px;
  background:url(images.jpg);
  background-repeat:no-repeat;
  background-position:center;
  border:2px solid;
  border-color:#CD853F;
  }
div.transparentbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid;
  border-color:#CD853F;
  opacity:0.6;
  filter:alpha(opacity=60);
  }
div.transparentbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#CD853F;
  }
</style>
</head>
<body>
<div class="image">
<div class="transparentbox">
<p>Hello World<br>
</p>
</div>
</div>

div.image

我正在为设置背景图像创建一个 div 标签。 借助 Height 和 Width 我给出尺寸，借助 background:url 设置背景图像，借助 background-repeat 图像，如果图像尺寸小，则永不重复，background-position 设置图像的位置， border：给出实心边框，border-color：属性用于给出边框的颜色。

div.transparentbox

借助这个标签，我们制作了透明框，margin 属性用于设置数据的边距，background-color: 用于设置背景颜色，opacity 用于设置框的透明度，过滤器:alpha(不透明度=60); 设置兼容 IE8 及更早版本。

div.transparentbox p

这是给定的风格

标签，这将设置边距、字体粗细和字体颜色。