如何改变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

回答

相关问题