- 此问题在此处已有答案**:
How to fill text of a child with the background-image of the parent?(3个答案)
Use text as a mask on background image(4个答案)
15小时前关门了。
默认情况下,我的按钮(React组件)有白色边框和透明背景。我希望在悬停时,按钮文本与背景颜色相同(本例中为红色),按钮的背景为白色。如何不硬编码红色?它应该始终具有一些父项的背景颜色。
第二个问题是,我有奇怪的黑色小故障的角落与混合混合模式。
简化代码,不含React:
div {
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.button {
background: transparent;
border: 2px solid white;
border-radius: 6px;
padding: 20px;
position: relative;
}
.button::after {
bottom: 0;
content:"";
top: 0;
left: 0;
right: 0;
position: absolute;
mix-blend-mode: difference;
transition: all 0.3s
}
.button:hover::after {
background-color: white;
}
<div>
<button class="button">Button</button>
</div>
1条答案
按热度按时间qlzsbp2j1#
您可以使用css变量并在悬停选择器上重用它