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

它正在这里的旋转木马中使用 - ＆gt; 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 lib为焦点项提供了一个is-selected类，在你的css文件中，你可以添加这两段代码，你应该没有扔进javascript中。

Answer 2

您可以使用带有ID选择器或其他选择器的javascript将不透明度应用于img，我将向您展示一个示例，将不透明度应用于div中的img标记：

<script>
  document.getElementById("myimgid").style.opacity="0.5";
</script>
<div>
  <img id="myimgid" src="img url" >
</div>

你可以为这个js脚本添加选项（点击，聚焦，模糊等）。我展示了将不透明度应用于img的基本方法。

Answer 3

.carousel-cell.is-selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
    text-align: center;
}

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

3 个答案: