使用 CSS 在带有填充的渐变上叠加图像答案

【问题标题】：Use CSS to overlay image on gradient with padding使用 CSS 在带有填充的渐变上叠加图像
【发布时间】：2018-09-11 14:16:59
【问题描述】：

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

（注意：为了方便问题，我将代码更改为 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，并明确设置了背景大小（自动 40 像素）。这确实为图像添加了填充，但它也为渐变添加了填充。

再次，在同一 jfiddle 中查看第二类

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

【问题讨论】：

标签： html css background-image background-position

【解决方案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>

【讨论】：

完美...以 nano 秒的优势击败了我。 ☺
简单，可能正是它的用途。感谢您抽出宝贵时间回答！
@Paulie_D 哈哈。通常我是那种幸运的接受者。 :P

【解决方案2】：

你为什么不使用

position: absolute;

在图像上，然后将其放在 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_2    
{ 
    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;
    width:               200px;
    height:              50px;
    padding-left:        65px;
    background-position: 5px 5px;
}

.myBtn_3  
{ 
    border: solid 1px #ff00ff;
    background-image: 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;
    position: relative;
}

.myBtn_3 img {
  position: absolute;
  left: 5px;
  top: 5px;
  height: calc(100% - 10px)
}

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

<div class="myBtn_2">
     test button two
     </div>
<br />

<div class="myBtn_3">
     test button three
     <img src="https://picsum.photos/21?image=1080">
     </div>

【讨论】：