Question

我正在尝试使用较小的图像覆盖图像，该图像在悬停时具有第一张图像的背景不透明度，仅使用css，因为我无法编辑html。

以下是HTML示例：

<div class="image">
  <a href="http://www.example.com">
    <img src="/uploads/2016/08/img1.png" class="rggclImgCenter">
  </a>
</div>

仅使用CSS，我认为会是这样的：

.image:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

但它只会取代图像。

Answer 1

如果您不想（或不能）修改html，可以使用C:\work\servers\netty>java -Durl=ws://localhost:9091/websocket -DsubProtocol="synapse(contentType='application/xml')" -cp netty-example-4.1.4.Final.jar;lib/*;. io.netty.example.http.websocketx.client.WebSocketClient WebSocket Client connected!。

请注意，您无法在css pseudo element元素上使用:before或:after

这是CSS：

img

您可以在https://jsfiddle.net/bq9khtz3/

上试用

Answer 2

没有原始图像所以使用了我自己的图像。看看这是否有帮助。

您也可以参考以下链接：https://jsfiddle.net/askptx0y/

＆＃13;

.image:hover {
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  background-repeat: no-repeat;
  opacity: 1;
}
img:hover {
  opacity: 0.5;
}

＆＃13;

<div class="image">
  <a href="http://www.example.com">
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">
  </a>
</div>

＆＃13;

Answer 3

尝试在:before上添加:hover元素。

.image a:hover:before {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

Answer 4

使图像透明：

.image a:hover image {
   opacity: 0;
 }

显示您的背景图片

.image a:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  /* add other properties */
}

Answer 5

    .image:hover img {
    -webkit-filter: brightness(40%);
    -moz-filter: brightness(40%);
    -ms-filter: brightness(40%);
    -o-filter: brightness(40%);
}
.image:hover img:after {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

仅使用css在悬停时叠加图像

5 个答案: