主页 / 问题 / 631518
Accepted
Dima
Asked:2020-02-23 14:51:30 +0000 UTC2020-02-23 14:51:30 +0000 UTC

输入按钮图像颜色

  • 772

如何设置按钮中图像的颜色？我找不到这样做的财产。

有一个带有图片的按钮。

.button {
        background: url('../image/arrow.png') 189px no-repeat; /* картинка */
        background-color: #ff5c36; /* цвет кнопке*/
        color:  #ffffff; /* цвет текста в кнопке*/
        width: 100px;
    }
<input class="button" type="button" value="Send">

不幸的是，我不明白如何将图像添加到代码中。

css

1 个回答

  1. Best Answer

    通常，在当前条件下，您将无法通过 CSS 属性更改箭头的颜色。或者将您的图标放在单独的图像和元素/伪元素中，并使用这样的过滤器（您不能将伪元素添加到输入中，您必须将它们替换为button）：

    button {
  position: relative;
  padding-right: 70px;
}

button:after {
  position: absolute;
  content: '';
  right: 10%;
  top: 10%;
  background-image: url(http://www.clker.com/cliparts/1/H/k/P/S/l/dezzit-right-bt-hi.png);
  background-size: 100% 100%;
  width:30px;
  height:14px;
}

.huerotate:after {
  filter: hue-rotate(45deg);
}
    <button>неповторимый оригинал</button>
<button class="huerotate">изменённая пародия</button>

    或者使用 SVG 或图标字体并将箭头插入按钮内并使用 CSS 设置样式：

    button {
  position: relative;
  padding-right: 50px;
}

button svg {
  fill:none;
  stroke: red;
  position: absolute;
  right: 10%;
  top: 15%;
}
    <button>
click me
<svg width=20 height=10>
  <polyline points="15,0 20,5 15,10"></polyline>
  <polyline points="0,5 20,5"></polyline>
</svg>
</button>

    • 1

相关问题