主页 / 问题 / 1541093
Accepted
The__Tip учусь
Asked:2023-09-17 15:32:21 +0800 CST2023-09-17 15:32:21 +0800 CST

如何更改从布局下载的 html 中的按钮制作的图片的颜色？

  • 772

.section__video{
position: relative;
z-index: 1;
}



.link__video{
position: absolute;
top: 50%;
left: 50%;
z-index: 2;

}

.link__video:hover{
color: #00B2A0;
}
<div class="section__video">
  <div class="container">
  <img class="video" src="image/video__bg.jpg" alt="">
<a   href=""><img class="link__video" src="image/link__bg.png" alt=""></a>
</div>
</div>

在此输入图像描述

css3

2 个回答

  1. 或者，您可以使用过滤器。

    .saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
    <img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="original">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="saturate" class="saturate">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="grayscale" class="grayscale">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="contrast" class="contrast">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="brightness" class="brightness">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="blur" class="blur">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="invert" class="invert">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="sepia" class="sepia">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="huerotate" class="huerotate">
<img src="https://isstatic.askoverflow.dev/5xr0k.jpg" title="opacity" class="rss opacity">

    聚苯乙烯

    您可以简单地更改图像本身。

    • 2
  2. Best Answer

    您的图像是 png 格式，这是不可能的。

    如果格式是 svg 并触摸填充属性，您可以：

    .button {
  width: 50px;
  height: 50px;
  margin: 10px;
  fill: grey;
}

.button:hover {
  fill: red;
}
    <div class="button">
  <svg height="100%" width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.804 17.804" xml:space="preserve">
    <g>
      <g id="c98_play">
        <path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
                 c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
                 c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
      </g>
      <g id="Capa_1_78_"></g>
    </g>
  </svg>
</div>

    • 1

相关问题