主页 / 问题 / 1239829
Accepted
Krovorgen
Asked:2022-02-04 16:40:30 +0000 UTC2022-02-04 16:40:30 +0000 UTC

按钮悬停时的透明文本

  • 772

有一个按钮

在此处输入图像描述

.header {
    background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
    height: 100vh;
}
.header__btn {
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 6px 28px;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    transition: 0.5s all;
}

.header__btn:hover {
    color: transparent;
    background-color: #fff;
    transition: 0.5s all;
}
<header class="header">
<button class="header__btn">купить</button>
</header>

如何在悬停时使文本透明？

html

2 个回答

  1. Best Answer

    要在 CSS 中实现您的想法，您需要对 HTML 进行干预。而且，确切地说 - 将文本包装在<span>. 接下来，在悬停时，只需更改y的背景颜色和 y<button>的文本阴影<span>颜色：

    .header {
  background-color: red;
  background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
  height: 100vh;
}

.header__btn {
  color: #f0f; /* Основной цвет */
  padding: 6px 28px;
  border: 1px solid currentColor;
  border-radius: .15em;
  font: bold 96px 'Arial Black';
  text-transform: uppercase;
  background-color: transparent;
  transition: background-color 1s ease-in-out;
}
.header__btn:hover { background-color: currentColor; }

.header__btn span {
  background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
  background-position: -28px -6px; /* Смещение фона на величину отступов */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0 currentColor;
  transition: text-shadow 1s ease-in-out;
}
.header__btn:hover span { text-shadow: 0 0 0 transparent; }
    <header class="header">
  <button class="header__btn"><span>купить</span></button>
</header>

    选择文本阴影动画是因为其余属性要么对过渡不友好，要么对性能产生负面影响。为了清楚起见，文本已被放大。

    • 5

  2. css 有一个掩码。你可以试试。但并非所有浏览器都支持此功能。或者你可以使用 svg：

    div {
    padding: 1em;
    background-color: blue;
}
button {
    background-color: transparent;
}
svg {
    width: 100px;
    height: 50px;
}
.btnBg {
    fill: red;
}
    <div>
    <button>
        <svg>
            <defs>
                <mask id="mask">
                    <rect width="100%" height="100%" fill="white"></rect>
                    <text x="50%" y="50%" text-anchor="middle" fill="black">test</text>
                </mask>
            </defs>
            <rect class="btnBg" width="100%" height="100%" mask="url(#mask)"></rect>
        </svg>
    </button>
</div>

    我从MDN doc中炮制了这个。他们有很好的关于网络技术的文档。我建议。

    悬停时，您只需要反转蒙版的颜色。文本将变为不透明（白色），背景变为透明（黑色）。

    • 2

相关问题