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>

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

How can I make my website's background transparent without making the content (images & text) transparent too?

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

我已尝试调整'main'div上的Z-index和不透明度，但它无效。

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

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

How do i make my background image transparent in CSS if I have the following code?

和这一个：

CSS background-image-opacity?

我没有足够的声誉来发布我想要实现的图像。

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 DEMO

网站参考：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标签。在高度和宽度的帮助下，我给出了大小，在背景的帮助下：url设置背景图像，借助背景重复图像从不重复，如果图像尺寸小，背景位置设置图像的位置， border：给出solid的border，border-color：属性用于给出border的颜色。

<强> div.transparentbox

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

div.transparentbox p

这是

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

使HTML正文背景图像透明

2 个答案: