使用CSS通过填充在渐变上叠加图像

Question

我正在尝试创建一个按钮,其中包含覆盖整个按钮的渐变,然后只在按钮的一部分上显示图像.

(注意:为了便于解决问题,我已将代码更改为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; 
}

代表这个的jfiddle可以在这里找到:

但是我想在按钮/ div中围绕我的图像边框,所以我添加background-position 5px 5px到css,以及明确设置背景大小(自动40px).这确实为图像添加了填充,但它也为渐变添加了填充.

再次,看到同一个jfiddle中的第二课

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

Answer 1

您也可以用逗号分隔各个背景属性.

.myBtn_3    
{ 
    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 40px, auto auto;
    width:               200px;
    height:              50px;
    padding-left:        65px;
    background-position: 5px 5px, 0 0;
}

<div class="myBtn_3">
test button two
</div>