CSS(不透明度转换)在我的测试网站上运行但不适用于真实网站

Question

我有一个不透明度过渡(当您将鼠标悬停在 slider 上时)在我的测试网站上有效，但在客户的网站上无效。当我检查元素 (.img-overlay) 时，它没有显示 CSS。

网址:http://wearepaperpeople.com/

这是我的代码:

.feat-item {
   position:relative;
   height:660px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display:block;
   width:100%;
   padding:17.2% 32.5%;
}
.img-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   opacity: 0;
   background-image: -webkit-linear-gradient(top,#fae615,#2e9a9c);
   background-image: -moz-linear-gradient(top,#fae615,#2e9a9c);
   background-image: -o-linear-gradient(top,#fae615,#2e9a9c);
   background-image: linear-gradient(top,#fae615,#2e9a9c);
   -webkit-transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
}
.img-overlay:hover {
   opacity: .6;
}

Answer 1

我确实检查了网站上的代码和您提到的代码。似乎样式表没有正确上传到服务器或其他一些问题。还向 image-overlay 添加过渡并使其成为背景而不是 background-image。

.feat-item {
  position:relative;
   height:660px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display:block;
   width:100%;
   padding:17.2% 32.5%;
}
.img-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   opacity: 0;
   background: -webkit-linear-gradient(top,#fae615,#2e9a9c);
   background: -moz-linear-gradient(top,#fae615,#2e9a9c);
   background: -o-linear-gradient(top,#fae615,#2e9a9c);
   background: linear-gradient(top,#fae615,#2e9a9c);
   -webkit-transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    }
    .img-overlay:hover {
       opacity: .6;
    }