如何更改身體標簽背景圖像的不透明度
[英]how to change body tag background image opacity
問題描述
我發現了一些已經存在的與此類似的問題，但它們並不是我要找的東西...
我想做的是，當頁面加載到XXX.php文件中時，使用轉換將<body>標記的不透明度從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。當所有內容加載后，在3秒鍾內開始將不透明度從0更改為1
4 個解決方案
解決方案1
1 2017-03-03 16:06:26
這是您可以執行的操作，在該方法中，您將覆蓋內聯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>
解決方案2
1 已采納 2017-03-03 16:09:15
使用body：before可以添加一個“掩碼”，當文檔准備好時，該掩碼可以淡出。doc的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);
解決方案3
0 2017-03-03 15:43:25
解決方案4
0 2017-03-03 16:00:55
嘗試這個
jQuery('body').css('opacity',0);
setTimeout(function(){
jQuery('body').css('opacity', 1);
},3000)
如何在jQuery中更改.animate（）之后的背景圖像不透明度？
[英]How to change background-image opacity after .animate() in jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.