更改圖像懸停時的背景顏色

Question

如何將其懸停在圖像上，整個圖像變為黑色（圖像鏈接必須在HTML標記中，因為尺寸和圖像不同）？

這就是我所擁有的：

HTML：

<img src="http://www.floral-directory.com/flower.gif" class="image" />

CSS：

.image {
  width: 250px;
}

.image:hover {
  background: #000000;
}

Answer 1

最簡單的方法是將img元素包裝在另一個元素中，例如span ：

<span class="imgWrap">
    <img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>

並將其與CSS結合：

.imgWrap {
    display: inline-block;
    border: 1px solid #000;
}

.imgWrap:hover {
    background-color: #000;
}

img:hover,
.imgWrap:hover img {
    visibility: hidden;
}

JS小提琴演示 。

並且，如果你想讓它變得更漂亮一點，使用過渡淡入/淡出：

.imgWrap {
    display: inline-block;
    border: 1px solid #000;
    background-color: #fff;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.imgWrap img {
    opacity: 1;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.imgWrap:hover {
    background-color: #000;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

img:hover,
.imgWrap:hover img {
    opacity: 0;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS小提琴演示 。

Answer 2

HTML

<div class="change_bg">
  <img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>

CSS

.change_bg img{
    max-width : 300px;
}

.change_bg{
    width : 300px;
    height : 300px;
    float:left;
}

.change_bg img:hover{
    visibility : hidden;
}

.change_bg:hover {
    background : #bc7d89;
}

實例@ http://cdpn.io/Bmthc