Html 如何使img在悬停时的不透明度为0.5时呈粉红色？

我有一组图像，当鼠标悬停时，图像的颜色会褪色（发白）。但我想要的是它是粉红色（粉红色褪色），不透明度为0.5。我不能让它改变它的颜色，我所做的只是图像在悬停时的褪色（发白）

.img覆盖{
位置：相对位置；
}
.img叠加img{
不透明度：1；
显示：块；
宽度：100%；
高度：自动；
过渡：放松；
背面可见性：隐藏；
}
.img叠加：悬停img{
不透明度：0.5；
}
.中{
过渡：放松；
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：转换（-50%，-50%）
}
.文本{
背景色：#4CAF50；
颜色：白色；
字体大小：16px；
填充：16px 32px；
}
.img叠加：悬停。中间{
不透明度：1；
}

意大利面食
意大利面食
意大利面食
意大利面食
意大利面食
意大利面食

您可以使用不同css的组合来实现所需的结果。我举了一个例子，摆弄和调整数字，直到它看起来粉红色

.img覆盖{
位置：相对位置；
}
.img叠加img{
不透明度：1；
显示：块；
宽度：100%；
高度：自动；
过渡：放松；
背面可见性：隐藏；
}
.img叠加：悬停img{
-webkit过滤器：乌贼墨（1）色调旋转（290度）饱和（6）不透明度（50%）；
滤镜：深褐色（1）色调旋转（290度）饱和（6）不透明度（50%）；
}
.中{
过渡：放松；
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：转换（-50%，-50%）
}
.文本{
背景色：#4CAF50；
颜色：白色；
字体大小：16px；
填充：16px 32px；
}
.img叠加：悬停。中间{
不透明度：1；
}

意大利面食
意大利面食
意大利面食
意大利面食
意大利面食
意大利面食

由于过滤器与所有浏览器都不兼容，或者您可能希望将图像设置为背景，并创建一个仅在悬停时显示的覆盖层。应该是这样的：

<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');">
  <h1>Pasta</h1>
</div>
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');">
    <h1>Pasta</h1>
</div>
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');">
    <h1>Pasta</h1>
</div>
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');">
    <h1>Pasta</h1>
</div>


body {
  text-align: center;
}
.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
  position: relative;
}

.overlay {
  position: relative;
}

.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
}

.overlay:hover:before{
  display: block;
}

.red:before {
  background-color: rgba(255,0,0,0.5);
}

.blue:before {
  background-color: rgba(0,0,255,0.5);
}

.green:before{
  background-color: rgba(0,255,0,0.5);
}

.orange:before {
  background-color: rgba(255,153,0, 0.5);
}

.box * {
    position: relative;
    /* hack */
}

h1 {
  color:white;
}

意大利面食
意大利面食
意大利面食
意大利面食
身体{
文本对齐：居中；
}
.盒子{
宽度：100px；
高度：100px；
边框：1px纯灰；
显示：内联块；
垂直对齐：顶部；
边缘顶部：10px；
背景图片：url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
位置：相对位置；
}
.覆盖{
位置：相对位置；
}
.覆盖：之前{
位置：绝对位置；
内容：“；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
z指数：0；
}
.overlay:悬停：在{
显示：块；
}
瑞德：以前{
背景色：rgba（255,0,0,0.5）；
}
蓝：以前{
背景色：rgba（0,0255,0.5）；
}
格林：以前{
背景色：rgba（0255,0,0.5）；
}
橙色：以前{
背景色：rgba（255153,0,0.5）；
}
.方框*{
位置：相对位置；
/*砍*/
}
h1{
颜色：白色；
}

然后，您可以使用颜色和不透明度进行游戏。

---

看看这个会是什么样子。

也许

背景混合模式

就是你需要的：嗯，我之前试过乌贼色css，但颜色不一样。但无论如何还是要谢谢你^ ^你也得在上面做

色调旋转

，我知道纯乌贼墨不是粉红色的：）

.img-overlay:hover:after img {background:pink; opacity:0.5;}