html - 使用 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:here

但是我想在按钮/div 中围绕我的图像添加一些边框，所以我向 css 添加了 background-position 5px 5px，并明确设置了背景大小(auto 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>