gpt4 book ai didi

css - 如何在 css 中创建围绕 Png 图像本身的悬停

转载 作者:可可西里 更新时间:2023-11-01 13:42:23 24 4
gpt4 key购买 nike

我想在 png 图像本身周围创建一个悬停,但我却在整个网格周围悬停。安娜的帮助将不胜感激。我只想要 android png 图像周围的阴影。

.button1 {
border: none;
background-repeat: no-repeat;
background-size:100%;
width: 100%;
height: 100%;
text-decoration: none;

font-size: 16px;

cursor: pointer;
outline: none;
}


.button3:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
<!DOCTYPE html>
<html>


<body>
<div class="grid">

<button id="btnMakeCall" class ="button1 button3">
<img src="http://pngimg.com/uploads/android_logo/android_logo_PNG34.png" style="width:80%; height:auto;" />

</button>

</div>
</body>

</html>

最佳答案

您将无法通过使用标准 PNG 文件来实现此目的。 Android Logo 可能具有透明背景,但它的尺寸仍然使其呈四边形(这就是为什么您的图像 - 在悬停时 - 在按钮后面显示阴影)。您可以通过执行@Pete 推荐的操作或创建 image sprite 来获得所需的结果。 .

Example

关于css - 如何在 css 中创建围绕 Png 图像本身的悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53672367/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com