Question

我有这个小问题，我想在我的网站上插入图片。我设法插入图片，但问题来自我想在代码中插入不透明度。当你翻过它时，我希望这张照片变得透明。

 <a href="http://www.byggprojektoren.se" style="opacity: 1;">  <img
 src="Image.jpg"> </a>

就像现在一样，当用鼠标移动时它是不透明的。

Answer 1

你可以给它一个：hover选择器，用这样的css：

img:hover {
    opacity:0,4;
}

编辑：

<html>
<head>
    <style>
  img:hover {
    opacity:0,4;
   }
</style>
</head>
<body>
<a href="http://www.byggprojektoren.se"> 
<img src="http://byggprojektoren.se/wp-content/uploads/2014/09/HomepagePic.jpg"> 
</a>
</body>
</html>

Answer 2

使用css代替内联样式。您也可以使用css作为悬停样式，如下所示：

img {
  opacity: 1;
}

img:hover {
  opacity: 0.5;
}

<img src="picture.jpg" />

在编写代码时，图像不会应用不透明度

2 个答案: