使 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

這是給定的風格

標簽，這將設置邊距、字體粗細和字體顏色。

使 HTML 正文背景圖像透明

問題描述

2 個解決方案

解決方案1
2 已采納 2015-04-04 08:41:01

解決方案2
0 2015-04-04 08:31:23

使 HTML 正文背景圖像透明

問題描述

2 個解決方案

解決方案1 2 已采納 2015-04-04 08:41:01

解決方案2 0 2015-04-04 08:31:23

解決方案1
2 已采納 2015-04-04 08:41:01

解決方案2
0 2015-04-04 08:31:23