画像を暗くする方法

-5

画像をある程度しか見ることができないので、画像を暗くしたいが、最後は完全に黒くない。私はバニラJSのみを使用したい（jQueryなし）。

var element = document.getElementById("img"); 
 
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",]; 
 

 
var counter = 0; 
 
var j=0; 
 
var i = setInterval(function(){ 
 
    if(j < colorArr.length){ 
 
     element.style.backgroundColor = colorArr[j]; 
 
     j++; 
 
    } 
 
    
 
    counter++; 
 
    if(counter === 8) { 
 
     clearInterval(i); 
 
    } 
 
}, 250);

div.darken img { 
 
    background-color: white; 
 
}

<html> 
 
 <body> 
 
  
 
    <div class="darken">  
 
    <img id="img" 
 
      src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" /> 
 
    </div> 
 

 
    </body> 
 
</html>

出典

2017-04-20 Zsolt Simon

あなたはあなたのポストにあなたのコードを配置する必要があります。これにより、他の人が同様の質問や同じ質問に対する回答を探している場合、その質問を見つけることができます！ – zfrisch

私は3つの異なるファイル（html、css、js）を持っています。コードの入れ方は分かりません。 –

試行あなた<img>タグ位置それ絶対画像と同じ幅と高さと上記第二の要素を追加、およびコードのごelement変数にそれを標的とします。

var element = document.getElementById("overlay"); 
 
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",]; 
 

 
var counter = 0; 
 
var j=0; 
 
var i = setInterval(function(){ 
 
    if(j < colorArr.length){ 
 
     element.style.backgroundColor = colorArr[j]; 
 
     j++; 
 
    } 
 
    
 
    counter++; 
 
    if(counter === 8) { 
 
     clearInterval(i); 
 
    } 
 
}, 250);

#overlay { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
}

<div id="overlay"></div> 
 
    <img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />

出典

2017-04-20 20:02:25 kawnah

Unfortunatelly、私は最後にある程度イメージを見ることができます。 –

答えて

関連する問題