Html 使用CSS在带有填充的渐变上覆盖图像

我试图创建一个包含覆盖整个按钮的渐变的按钮，然后在按钮的一部分上有一个图像

（注意：为了便于提问，我将代码更改为div，但结果保持不变）

最初，这是成功的：

<div class="myBtn_1">test button one</div>

.myBtn_1    
{ 
  border: solid 1px #ff00ff;
  background-image: url('https://picsum.photos/21?image=1080'), 
     linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
  background-repeat:   no-repeat;
  background-size:     auto 100%;
  width:               200px;
  height:              50px;
  padding-left:        65px; 
}

测试按钮一
.myBtn_1
{ 
边框：实心1px#ff00ff；
背景图像：url（'https://picsum.photos/21?image=1080'), 
线性梯度（向右，rgba（141245146,1），rgba（255,255,255,1））；
背景重复：无重复；
背景尺寸：自动100%；
宽度：200px；
高度：50px；
左侧填充：65px；
}

可以找到代表这一点的jfiddle：

但是，我希望在按钮/div中的图像周围有一些边框，因此我在css中添加了

background position 5px 5px

，并明确设置了背景大小（auto 40px）。这确实为图像添加了填充，但也为渐变添加了填充

同样，请看同一章节中的第二节课

---

问题：如何在css中创建一个渐变覆盖整个背景的按钮/div，然后添加一个周围有填充的图像？

您也可以用逗号描绘各个背景属性

.myBtn\u 3
{ 
边框：实心1px#ff00ff；
背景图像：url（'https://picsum.photos/21?image=1080线性梯度(向右,rgba(141,245,146,1),rgba(255,255,1);；
背景重复：无重复；
背景尺寸：自动40px，自动自动；
宽度：200px；
高度：50px；
左侧填充：65px；
背景位置：5px5px，0；
}

测试按钮二

为什么不使用

position: absolute;

在图像上，然后把它放在div中

.myBtn\u 1
{ 
边框：实心1px#ff00ff；
背景图像：url（'https://picsum.photos/21?image=1080'), 
线性梯度（向右，rgba（141245146,1），rgba（255,255,255,1））；
背景重复：无重复；
背景尺寸：自动100%；
宽度：200px；
高度：50px；
左侧填充：65px；
}
.myBtn_2
{ 
边框：实心1px#ff00ff；
背景图像：url（'https://picsum.photos/21?image=1080线性梯度(向右,rgba(141,245,146,1),rgba(255,255,1);；
背景重复：无重复；
背景尺寸：自动40px；
宽度：200px；
高度：50px；
左侧填充：65px；
背景位置：5px 5px；
}
.myBtn_3
{ 
边框：实心1px#ff00ff；
背景图像：线性渐变（向右，rgba（141245146，1），rgba（255，255，255，1））；
背景重复：无重复；
背景尺寸：自动100%；
宽度：200px；
高度：50px；
左侧填充：65px；
位置：相对位置；
}
.myBtn_3 img{
位置：绝对位置；
左：5px；
顶部：5px；
高度：计算（100%-10px）
}    

测试按钮一


测试按钮二


测试按钮三

完美…比我快一纳秒。☺很简单，也许正是因为这个。感谢您花时间回答@保利大笑。通常我都是那种运气的接受者P