我想创建一个带有纹理背景、渐变和左对齐图标的按钮。这是我的代码,但没有显示背景渐变。
background:#B1D521;
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -o-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -moz-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -webkit-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -ms-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-repeat:no-repeat, repeat;
background-position:10% center;
最佳答案
我最终想出了答案。这是一种解决方法,但我在按钮内添加了一个宽度和高度相同的跨度,并将其设置为透明,然后将鼠标悬停在按钮上时,我对按钮的不透明度进行了转换。这样我就可以伪造具有多个背景和渐变的过渡。
关于具有多个图像的css背景渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11411807/