我有一个背景图片褪色的div。我想要淡化它们但是我只能将它们淡化为白色,然后再回到下一个图像。我尝试使用fadeTo()而不是fadeIn(),但没有太大的区别。这是代码:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<include resource="org/springframework/boot/logging/logback/base.xml"/>
<logger name="org.springframework.boot" level="INFO"/>
<logger name="org.springframework.security" level="ERROR"/>
<logger name="org.glassfish.jersey" level="DEBUG"/>
<property resource="application.properties"/>
<appender name="DUMMY_APPENDER" class="ch.qos.logback.core.rolling.RollingFileAppender">
<file>${project.build.directory}/${log.folder}/logfile.log</file>
<encoder>
<pattern>%d{"yyyy-MM-dd HH:mm:ss,SSS zzz"}, [%thread] %-5level %logger{5} - %msg%n
</pattern>
</encoder>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<fileNamePattern>${log.folder}/spring.log.%d</fileNamePattern>
</rollingPolicy>
</appender>
<logger name="xxxxxx" level="INFO" additivity="false">
<appender-ref ref="DUMMY_APPENDER"/>
</logger>
<root level="INFO">
<appender-ref ref="DUMMY_APPENDER"/>
</root>
</configuration>
HTML:
<script type="text/javascript">
var b_imgs = ["dl1.jpg", "dl2.jpeg"];
$(function () {
var i = 0;
$("#index_jum").css("background-image", "url(/assets/" + b_imgs[i] + ")");
setInterval(function () {
i++;
if (i == b_imgs.length) {
i = 0;
}
$("#index_jum").fadeOut(2500, function () {
$(this).css("background-image", "url(/assets/" + b_imgs[i] + ")");
$(this).fadeIn(2500);
});
}, 9000);
});
</script>
CSS:
<section id="index_jum" class="mouse-bg row" data-autoheight="true">
如何交叉淡化图像?或者有没有办法将fadeIn()/ fadeOut()变为黑色而不是白色?目前,图像淡入淡出然后有白色过渡。即。 image1淡入白色,白色渐变为image2