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，并明确设置了背景尺寸（自动40px）。这确实为图像添加了填充，但也为渐变添加了填充。

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

问题：我如何在CSS中创建一个按钮/ div，该按钮/ 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在带有渐变的渐变上覆盖图像

2 个答案: