使用JavaScript对div图像应用不透明度

我试图使用

：before

选择器来选择图像，但发现这是不可能的，但我读到我可以使用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 */
} 

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

我不是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;
}

它正在这里的旋转木马中使用-->

现在我想为

旋转木马单元

但为div中的图像做一个

：before

和

：after

我试图用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 */
} 

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

---

有人能帮我做到这一点吗？

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

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

document.getElementById（“myimgid”）.style.opacity=“0.5”；

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

css

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

---

JS库为焦点项提供了一个选择了

的类，并且在css文件中，您可以添加这两位代码，您应该可以在不使用javascript的情况下使用。是否要为未居中的旋转木马项提供
不透明度：0.5
？是，我希望不居中的图像的不透明度为0.5@ms_n谢谢你，我应该知道，但有时我会忘记一些事情，这本身并不是一个很好的答案；解释你的答案会让它变得更好（例如，参见此处发布的其他答案）。
/* 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 */
} 

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