javascript - 使用 JavaScript 将不透明度应用于 div 图像

Question

我试图对图像使用 :before 选择器，但发现这是不可能的，但我读到我可以使用 javascript 做到这一点。

我不是 javascript 专家，也不确定如何编写代码。

这是正在使用的css

.carousel-cell.is-selected {
background: #ED2;
}

/* cell number */
img.carousel-cell:before{
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

它正在此处的轮播中使用 --> http://codepen.io/desandro/pen/YPezvR

现在我想要完成的是 :before 和 :after 用于 carousel-cell 但用于 div 中的图像。

我试图用 javascript 来完成这个。

/* cell number */
img.carousel-cell:before{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
} 

/* cell number */
img.carousel-cell:after{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
} 

谁能帮我完成这个？

Answer 1

CSS

.carousel-cell {
    opacity: 0.5;
}
.carousel-cell.is-selected {
    opacity: 1;
}

JS 库为焦点元素提供了一个 is-selected 类，在您的 css 文件中，您可以添加这两段代码，您应该可以不用在 javascript 中折腾。