Question

我发现了一些与此类似的已存在的问题，但它们并不是我正在寻找的......

我要做的是在<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秒

Answer 1

以下是您可以执行的操作，您可以在其中覆盖内联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>

Answer 2

使用body：在＆＃34; mask＆＃34;之前可以添加，然后可以在文档准备好时逐渐淡出jQuery简写为doc ready是$（function（）{...}）或者之前添加javascript具有相同的效果。 CSS可以通过使用类来处理转换。然后javascript处理添加/删除类以调用CSS转换。唯一有轻微断开的部分是当转换完成时，需要移除或推回掩模，以便它不再阻塞，这可以通过与转换时间匹配的超时来完成。请参阅此处的jsfiddle https://jsfiddle.net/6p3ovena/

var jsonData = [
['sample', 'data', 'for'],
['generating', 'excel', 'in'],
['java', 'script', ' ']
];

require(['excel-builder.js/excel-builder', 'download'], function (EB, downloader) {
    var JSworkBook = EB.createWorkbook();
    var JSworkSheet = JSworkBook.createWorksheet({name: 'Sheet'});

    JSworkSheet.setData(jsonData); 

    JSworkBook.addWorksheet(JSworkSheet);

    var data = EB.createFile(JSworkBook);
    downloader('Artist WB.xlsx', data);
});

Answer 3

你可以尝试使用CSS：after。

请看一下https://fiddle.jshell.net/ps5v8efc/。

让我知道。

Answer 4

试试这个

id = as.factor(c(244, 244, 244, 333, 333, 
                 582, 582, 582, 676, 676, 676))     
id2 = as.factor(c(81308991, 97881213, 84929200, 59742977, 25048598, 
                  30902503, 62598100, 33639927, 13531041, 15731681, 49423609))  
count = c(1, 2, 3, 1, 2, 1, 2, 3, 10, 11, 12) 
group = as.factor(c("black", "black", "black", "black", "black", 
                    "yellow", "yellow","yellow", "yellow", "yellow", "yellow"))  
df = data.frame(id, id2, count, group)

如何更改body标签背景图片的不透明度

4 个答案: