Question

我想知道是否有人遇到过这个问题，其中Apache提供的代码可以正常工作，但是从Express提供的代码却没有。

设置应该有一个徽标（logo.svg）来掩盖旋转的背景图像（＆＃34; first.jpg＆＃34;＆＃34; second.jpg＆＃34;）。

我的具体问题是这个代码在Apache服务器上渲染得很好，但是掩盖的图像（＆＃34; logo.svg＆＃34;）不会渲染。

我已检查过pathes（与背景图片在同一目录中一样好）。我检查过SVG，看起来还可以。我试图找到其他这种情况，但没有运气。控制台也没有线索。

提前感谢您的帮助。

这是我的代码：

HTML：

<div class="bg">
      <div class="bg_item"></div>
      <div id="fader" class="bg_item"></div>
 </div>
<div id="svg">  </div>

JS：

var fader = document.getElementById("fader");
var timer = setInterval(switcher, 3000);

function switcher() {
    fader.classList.toggle("hide");
}

CSS：

#svg {
    width: 100%;
    height: 100%;

    color: linear-gradient(358deg, #dd851e, #551edd);
    background-color: currentColor;
    -webkit-mask: url(/images/logo.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;

  background: linear-gradient(358deg, #dd851e, #551edd);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 33s ease infinite;
  -moz-animation: AnimationName 33s ease infinite;
  -o-animation: AnimationName 33s ease infinite;
  animation: AnimationName 33s ease infinite;
}


.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.bg_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: opacity 6000ms ease;
}

.bg_item:nth-child(1) {
    background-image: url(/images/first.jpg);
    background-size: cover;
}

.bg_item:nth-child(2) {
    background-image: url(/images/second.jpg);
    background-size: cover;
}

.hide {
    opacity: 0;
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
@keyframes AnimationName {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
html {
  height: 100%;
  background-color: #2196F3;
  /*max-width:400px;*/
}
body {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5em;
  border-top: none;
  border-bottom: none;
}

使用webkit-mask不能使用Express

0 个答案: