Question

我想让图像变暗，但最终并不是完全黑，因为我可以在某种程度上看到图像。我想只使用vanilla 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>

Answer 1

我会用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>

Answer 2

这是仅限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>

Answer 3

您可以使用网络动画API Promise.all()动画background-color <img> .parentElement从#fff到#000的动画，并为{{{}制作动画1}}元素<img>并行opacity。

＆＃13;

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)]);

＆＃13;

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

＆＃13;

Answer 4

使用伪元素并按原样保留标记，添加CSS过渡，然后使用悬停或脚本激活它，这最适合

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何完全变暗图像？

4 个答案: