背景圖像不透明問題

我現在正在主頁上工作，並且遇到了一些問題。背景圖像不透明問題

我有一個背景圖片設置在身體蓋：

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");

除了背景圖像，一切都消失了，儘管它在body-tag？任何想法？

更新！ 我上傳了「問題網站」到網站空間。 Website

只需單擊「查詢」，然後單擊任意框並按ENTER調用js函數。

謝謝！

來源

2013-10-16 Dominik Seemayr

供應商前綴？不需要。另外，向我們展示您當前所使用的JavaScript，除了背景圖像之外，所有內容都會消失。 –

@BetaSystems - 您只需要50名代表就其他人員發表評論。如果你是一個積極的用戶，這很容易獲得，但有效地減少了一個不知道/關心該網站關於和濫用評論的定時器的噪音。 –

我可能是錯的，但不透明度適用於該元素及其所有子元素。見http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ –

我製作了a fiddle與您的代碼重現問題。代碼可以簡化成這樣：

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

根本的問題是，隨着<body>元素的透明度擺弄沒有任何效果，除非你有以下的東西。一個簡單的解決方法是補充一點：在`背景size`財產

html{ 
    background-color: white; 
}

Updated fiddle

來源

2013-10-16 16:05:20

+1奇怪的是，有了HTML的背景使其工作！ – ediblecode

+1最簡單的解決方案。 –

已經工作。謝謝！（對不起，沒有足夠的聲望來投票._。） –

無論出於何種原因（我似乎無法找到爲什麼任何引用），在<body>標籤設置opacity:0或visibility:hidden對background-image沒有影響。它肯定影響了一個帶有背景圖像的元素，它是身體標記的子元素。所以，你有兩個選擇：

添加的包裝<div>圍繞<body>內容：

如果您目前有：

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

更改爲：

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

而動身體上的CSS到#wrapper以及任何Javascript/jQuer Ÿ針對身體

無論您是在設置opacity:0設置HTML元素

的透明度，做到這一點<html>元素來代替。

就我個人而言，我會推薦第一個選項。

來源

2013-10-16 16:01:59 ediblecode

背景圖像不透明問題

回答

相關問題