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

概述我正在尝试创建一个按钮,其中包含覆盖整个按钮的渐变,然后只在按钮的一部分上显示图像. (注意：为了便于解决问题,我已将代码更改为div,但结果仍然相同) 最初这是成功的： <div class="myBtn_1">test button one</div>.myBtn_1 { border: solid 1px #ff00ff; background-image: url(' 我正在尝试创建一个按钮,其中包含覆盖整个按钮的渐变,然后只在按钮的一部分上显示图像.

(注意：为了便于解决问题,我已将代码更改为div,但结果仍然相同)

最初这是成功的：

<div >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 >test button two</div>

总结

以上是内存溢出为你收集整理的html – 使用CSS在带有填充的渐变上叠加图像全部内容，希望文章能够帮你解决html – 使用CSS在带有填充的渐变上叠加图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。