使用JavaScript將不透明度應用於div圖像

我想爲圖像使用:before選擇器，但發現這是不可能的，但我讀到我可以使用javascript來做到這一點。使用JavaScript將不透明度應用於div圖像

我不是一個贊成在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

現在我要做到的是爲carousel-cell但對於一個:before和:after在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 */ 
}

任何人都可以幫助我做到這一點嗎？

來源

2016-08-16 Terrell Anderson

你想給輪轉物品不居中「不透明度：0.5」嗎？ –

是的，我想圖像不居中有一個不透明度0.5 @ms_nitrogen –

css

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

的JS LIB給予重點項目一類的is-selected，並在你的CSS文件，你可以添加的代碼，這兩個位，你應該是一個，還好沒有在JavaScript折騰。

來源

2016-08-16 21:56:29

謝謝，我應該知道，但有時我忘了事情smh –

您可以將不透明度改爲使用JavaScript和ID選擇或其他選擇的IMG，我會告訴你申請的不透明度爲IMG標記在DIV一個例子：

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

，你可以添加選項，這js腳本（點擊，焦點，模糊等）我展示了將不透明度應用於img的基本方法。

來源

2016-08-16 21:53:14 NurlanXp

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

來源

2016-08-16 22:00:23

嘿，這本身並沒有一個很好的答案;解釋你的答案會讓它變得更好（參見這裏發佈的其他答案）。 – gsnedders

使用JavaScript將不透明度應用於div圖像

回答

相關問題