我正在尝试创建一个按钮,其中包含覆盖整个按钮的渐变,然后只在按钮的一部分上显示图像.
(注意:为了便于解决问题,我已将代码更改为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>