在具有背景色的父div中对PNG图像(透明)进行覆盖悬停效果的问题

我相信这很简单,但我似乎无法弄清楚。我想在图像上创建叠加悬停效果,但是我对其中具有透明度的PNG图像遇到麻烦。父div元素的黑色背景填充了PNG图像的透明部分,就好像图像的部分设置为不透明:默认为0。

这是我的html

BEGIN_EVENT_TABLE(APMainFrame,MainFrame)
EVT_BUTTON(BUTTON_Hello,APMainFrame::OnExit) 
END_EVENT_TABLE() // The button is pressed

APMainFrame::APMainFrame( wxWindow* parent )
:
MainFrame( parent )
{
    HelloWorld = new wxButton(this,BUTTON_Hello,_T("Hello World"),// shows a button on this window
        wxDefaultPosition,wxDefaultSize,0); 

}

void APMainFrame::OnExit(wxCommandEvent& event)
{
    Close(TRUE);
}

这是我的CSS

<div class="parent">
<img src="transparent.png"/>
</div>

在具有背景色的父div中对PNG图像(透明)进行覆盖悬停效果的问题

adsddn 回答:在具有背景色的父div中对PNG图像(透明)进行覆盖悬停效果的问题

这里是解决方案,不多说了,但是值需要相应地更改,我只是使用值来显示函数。阅读代码注释

.parent {
background-color: #000000;
}
.parent img:hover {
  opacity: .1; /*change this accordingly*/
background: rgba(255,255,0.5);
/*Last value of rgba is opacity,0.0 -> 1.0*/
}

.parent img {
  background: rgba(255,1);;
}
<div class="parent">
<img src="https://www.lunapic.com/editor/premade/transparent.gif"/>
</div>

本文链接:https://www.f2er.com/2455135.html

大家都在问