背景圖像不透明度問題

Question

我現在正在制作主頁，但遇到一些問題。

我將背景圖像設置為覆蓋在體內：

body{
    opacity: 1;
    transition:opacity 0.5s ease-out;
    background-image: url(Background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

現在，我希望使用javascript將整個身體標簽的不透明度更改為0。

$("body").css("opacity", "0");

除了背景圖像，一切都消失了，盡管它在人體標簽中？ 有任何想法嗎？

UPDATE！ 我將“問題站點”上傳到了網絡空間。 網站

只需單擊“查詢”，然后單擊任意框，然后按Enter即可調用js函數。

謝謝！！

Answer 1

我對您的可重現該問題的代碼進行了擺弄。 代碼可以簡化為：

body{
    opacity: 0.1;
    background-color: red;
}

根本問題是，擺弄<body>元素的不透明度不會產生任何效果，除非您具有以下內容。 一個簡單的解決方法是添加以下內容：

html{
    background-color: white;
}

更新的小提琴

Answer 2

無論出於什么原因（我似乎都找不到為什么的引用），在<body>標簽上設置opacity:0或visibility:hidden對background-image沒有影響。 它的背景圖像元素肯定是body標簽的子元素。 因此，您有兩種選擇：

在<body>內容周圍添加包裝器<div> ：

您目前所在的位置：

<body>
    <!-- Content -->
</body>

更改為：

<body>
    <div id="wrapper">
        <!-- Content -->
    </div>
</body>

並將主體上的CSS移至#wrapper以及任何以Javascript / jQuery為目標的主體

在HTML元素上設置不透明度

無論您在哪里設置opacity:0 ，都可以在<html>元素上進行。

就個人而言，我建議第一種選擇。

背景圖像不透明度問題

問題描述

2 個解決方案

解決方案1
4 已采納 2013-10-16 16:05:20

解決方案2
0 2013-10-16 16:01:59

背景圖像不透明度問題

問題描述

2 個解決方案

解決方案1 4 已采納 2013-10-16 16:05:20

解決方案2 0 2013-10-16 16:01:59

解決方案1
4 已采納 2013-10-16 16:05:20

解決方案2
0 2013-10-16 16:01:59