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

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

(注意:为了便于解决问题,我已将代码更改为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,1)); 
  background-repeat:   no-repeat;
  background-size:     auto 100%;
  width:               200px;
  height:              50px;
  padding-left:        65px; 
}

代表这个的jfiddle可以找到:here

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

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

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

解决方法

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

.myBtn_3    
{ 
    border: solid 1px #ff00ff;
    background-image: url('https://picsum.photos/21?image=1080'),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>

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...