使用 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

但是我想在 button/div 中为我的图像添加一些边框，所以我将 background-position 5px 5px 添加到 css，并明确设置了背景大小（自动 40 像素） .这确实为图像添加了填充，但它也为渐变添加了填充。

同样，请参阅第 2 个 class jfiddle

问题： 如何在 css 中创建一个具有覆盖整个背景的渐变的 button/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>

Answer 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>

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

Use CSS to overlay image on gradient with padding

html

css

background-image

background-position