css 将按钮背景色反转为文本颜色[复制]

toiithl6 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(117)

- 此问题在此处已有答案**：

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>

css

来源：https://stackoverflow.com/questions/75147833/invert-button-background-color-with-text-color

1条答案

按热度按时间

qlzsbp2j1#

您可以使用css变量并在悬停选择器上重用它

:root {
  --my-color: red; /* Or whatever you want */
}

div {
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--my-color);
}

.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 {
   color: var(--my-color);
   background-color: white;
}

<div>
  <button class="button">Button</button>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

css 将按钮背景色反转为文本颜色[复制]

1条答案

相关问题

热门标签

最新问答