如何完全变暗图像？

问题描述：

我想让图像变暗，但最终并不完全黑，因为我可以在一定程度上看到图像。我只想使用香草JS（没有jQuery）。我已经使用了一个颜色数组（colorArr），但我认为有更多更优雅的变暗方法。如何完全变暗图像？

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>

只需将图像替换为全黑图像即可。 –

图像在底部显示红色色调，黑色背景上可见。 –

答

我会使用CSS和JavaScript这样做。

window.onload = function() { 
 
    document.getElementById("mask").classList.add("on"); 
 
};

.dark-img {display: inline-block; position: relative;} 
 
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #000; transition: opacity 2.5s linear;} 
 
.dark-img .mask.on {opacity: 1;}

<div class="dark-img"> 
 
    <div class="mask" id="mask"></div> 
 
    <img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" /> 
 
</div>

这种技术可以让我使用任何颜色和持续时间。比方说，橙色1.5秒：

window.onload = function() { 
 
    document.getElementById("mask").classList.add("on"); 
 
};

.dark-img {display: inline-block; position: relative;} 
 
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #f90; transition: opacity 1.5s linear;} 
 
.dark-img .mask.on {opacity: 1;}

<div class="dark-img"> 
 
    <div class="mask" id="mask"></div> 
 
    <img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" /> 
 
</div>

答

这是一个CSS只解决方案！

a.darken { 
 
    display: inline-block; 
 
    background: black; 
 
    padding: 0; 
 
} 
 

 
a.darken img { 
 
    display: block; 
 
    
 
    -webkit-transition: all 0.5s linear; 
 
     -moz-transition: all 0.5s linear; 
 
     -ms-transition: all 0.5s linear; 
 
     -o-transition: all 0.5s linear; 
 
      transition: all 0.5s linear; 
 
} 
 

 
a.darken:hover img { 
 
    opacity: 0; 
 
      
 
}

<a href="http://google.com" class="darken"> 
 
    <img src="http://www.placehold.it/200x200" width="200"> 
 
</a>

如果图像具有像问题中使用的一个OP那样的alpha，该怎么办？别作弊！ –

答

您可以使用Web动画API，Promise.all()动画的<img>从#fff的background-color.parentElement到#000和并行动画<img>元素opacity到0。

const element = document.getElementById("img"); 
 
element.parentElement.style.width = `${element.naturalWidth}px`; 
 

 
const button = document.querySelector("button"); 
 
const colorArr = ["#fff", "#ddd", "#bbb", "#999", "#777", "#555", "#333", "#000"]; 
 

 
const settings = { 
 
    easing: "linear", 
 
    fill: "forwards", 
 
    duration: 2500, 
 
    iterations: 1 
 
    }; 
 

 
button.onclick =() => 
 
    Promise.all([element.parentElement.animate(colorArr.map(color => ({ 
 
    backgroundColor: color 
 
    })), settings) 
 
    , element.animate([{opacity: 0}], 
 
    settings)]);

div.darken img { 
 
    background-color: white; 
 
    position: relative; 
 
    opacity: 1; 
 
}

<html> 
 

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

 
</body> 
 

 
</html>

@LGSon什么是错误？ – guest271314

@LGSon哪些浏览器试图在stacksnippets上运行'javascript'？ – guest271314

@LGSon哪个版本的Chrome？请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Browser_compatibility。 – guest271314

答

使用伪元素和保持标记原样，添加CSS过渡，然后用悬停或脚本启动它，它永远西装最好

window.addEventListener('load', function(){ 
 
    document.querySelector('button').addEventListener('click', function(){ 
 
    document.querySelector('.darken').classList.toggle('on'); 
 
    }) 
 
})

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

 
div.darken { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
div.darken::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    bottom: 0; right: 0; 
 
    background: black; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 
div.darken:hover::after { 
 
    opacity: 1; 
 
} 
 
div.darken.on::after { 
 
    opacity: 1; 
 
    background: lightgray; 
 
} 
 

 

 
@keyframes darken { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
}

<html> 
 
<body> 
 
    
 
    <button>Click here (or hover image) to toggle darken</button><br> 
 
    
 
    <div class="darken">  
 
    <img id="img" 
 
      src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" /> 
 
    </div> 
 

 
    
 
    </body> 
 
</html>

如何完全变暗图像？

相关推荐