Question

我有一个不透明度转换（当您将鼠标悬停在滑块上时），该转换适用于我的测试网站，但不适用于客户端的网站。当我检查元素（.img-overlay）时，它没有显示CSS。

这是我的代码：

.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

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

.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;
    }

CSS（不透明度转换）在我的测试网站上工作但不是真实网站

1 个答案: