如何改變body標籤的背景圖像透明度

-1

我發現了一個類似的一些已經存在的問題，但他們不正是我期待的...如何改變body標籤的背景圖像透明度

我所試圖做的是改變<body>標籤當頁面在XXX.php文件中加載時使用轉換從0到1的不透明度。我的代碼工作正常，除了背景圖像似乎不受過渡影響。

一些示例代碼給你粗略的想法，我試圖實現這一點。

HTML：

<html> 
    <body style="background='url(..LINK..) rgb(0, 0, 0) 0% 0% no-repeat'"> 
    </body> 
</html>

CSS：

body { 
    opacity: 0; 
    transition: opacity 3s; /*will skip webkit, etc here*/ 
}

JS：

jQuery(window).load(function(){ 
    jQuery('body').css('opacity', 1); 
}

所有內容都表現正常，而如預期的那樣在3秒內將不透明度從0變爲1，然而背景圖像被直接加載。我希望它需要3秒鐘將不透明度從0更改爲1。

我試圖將CSS和JS應用到<html>標記，但它仍然會產生相同的效果。

此外，我也不能修改那個XXX.html文件，也沒有訪問該上下文中的background: 'url("...")'值，所以不能用JS處理效果。

如何解決它的任何建議？

編輯我想最初的<body>不透明度爲0。而當所有的內容加載，開始改變不透明度從0到1，即3秒

來源

2017-03-03 Marius

你想要的頁面，從'0'淡出對負載'1'？ – PhpDude

@PhpDude是的，希望它是不透明度：0.當所有內容加載時，在3秒內將不透明度從0改爲1 – Marius

使用體：「掩模」可以被添加，然後可以淡出當文檔準備的jQuery簡寫文檔準備好之前是$（function（）{...}）或者之前添加javascript具有相同的效果。 CSS可以通過使用類來處理轉換。然後JavaScript處理添加/刪除類來調用CSS轉換。唯一有輕微斷開的部分是當轉換完成時，需要刪除或推回掩碼，以便它不再阻塞，這可以通過與轉換時間匹配的超時完成。在這裏看到的jsfiddle https://jsfiddle.net/6p3ovena/

(function($) { 
    var body = $("body"); 
    $(function() { 
    body.removeClass("before-load"); 
    setTimeout(function() { 
     body.addClass("after-transition"); 
    }, 3000); 
    }); 
})(jQuery);

來源

2017-03-03 16:09:15 lewnelson

你可以用CSS嘗試：後。

請看看https://fiddle.jshell.net/ps5v8efc/。

讓我知道。

來源

2017-03-03 15:43:25

感謝提供的解決方案，但我無法使用它。我沒有訪問背景圖片的URL，這就是爲什麼我不能創建：在CSS規則 – Marius

試試這個

jQuery('body').css('opacity',0); 
    setTimeout(function(){ 
      jQuery('body').css('opacity', 1); 
    },3000)

來源

2017-03-03 16:00:55

這不會使初始背景圖像是不可見的 – Marius

我編輯我的答案jQuery（'body'）.css（'opacity'， 0）;根據我的原始問題，超時前 –

，不透明度：0仍然不會使背景圖像變得透明 – Marius

這裏是你如何能做到，你重寫內嵌background-size（設置爲0），並創建一個繼承它的背景圖片

如果你假想要保持jQuery踢動畫我添加了2：nd示例最後在我的回答中

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    position: relative; 
 
    background-size: 0 !important; 
 
    opacity: 0; 
 
} 
 
body::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
} 
 
body, 
 
body::before { 
 
    animation: slides 2.5s linear 0.5s forwards; /* 0.5s delay, 2.5s duration */ 
 
} 
 

 
@keyframes slides { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
body > div { 
 
    position: relative; /* needed on all direct children */ 
 
    background: white; 
 
    font-size: 20px; 
 
    margin: 0 20px; 
 
    padding: 20px; 
 
}

<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'> 
 

 
    <div> 
 
    Your content 
 
    </div> 
 

 
</body>

樣品2

$(document).ready(function() { 
 

 
    $('body').addClass('showme'); 
 

 
});

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    position: relative; 
 
    background-size: 0 !important; 
 
    opacity: 0; 
 
} 
 
body::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
} 
 

 
body.showme, 
 
body.showme::before { 
 
    animation: showme 3s linear forwards; 
 
} 
 

 
@keyframes showme { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
body > div { 
 
    position: relative; /* needed on all direct children */ 
 
    background: white; 
 
    font-size: 20px; 
 
    margin: 0 20px; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'> 
 

 
    <div> 
 
    Your content 
 
    </div> 
 

 
</body>

來源

2017-03-03 16:06:26 LGSon

回答

相關問題