由于互联网连接速度慢，如何加载背景图像时加载颜色渐变？

Question

我正在尝试在我的背景图片加载时加载颜色渐变，但即使图像正在加载也会显示。如何编写我的CSS，以便在加载图像时不显示颜色渐变？ 请查看我尝试过的示例代码：

background: url("../images/contactBg.jpg"), linear-gradient(rgba(3, 34, 47, 0.8), #01010e);

Answer 1

如果你不介意添加另一个html标记，你可以用背景渐变在背景图像中包含背景图像的div。

Answer 2

我不认为（或至少知道）任何方式只在CSS中这样做。

解决方法是使用member initializer list（未测试）：

operator()

这样，将$('#mydiv').load('../images/contactBg.jpg', function() { //image has loaded, remove the background and add the image $('#mydiv').css("background", "none"); $('#mydiv').css('background-image', 'url(../images/contactBg.jpg)'); }); 的css设置为#mydiv，当加载图片时，这将删除渐变并将其替换为图像。