css - 按钮上的线性渐变和背景图像

Question

嘿，我有一个愚蠢的问题。

我正在尝试创建一个包含 .svg 背景和背景渐变的按钮。

一切都很好，但是当我添加 background-size 来控制按钮内图像的大小时，渐变开始以某种模式重复自身。像这样:

http://jsfiddle.net/umbriel/g31nprgz/

有没有办法让渐变跨越整个高度而不重复并且能够控制按钮内的图像大小？

谢谢

Answer 1

您可以在逗号分隔的列表中添加多个背景尺寸，就像背景图片一样。

所以，你的修复是这样的:

background-size: 50px, contain;

Example Fiddle

每个序号对应于背景图像的相同位置，因此 background-size 列表中的第一项。适用于 background-image 列表中的第一项