有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …是否可以使用 CSS 的linear-gradient()功能来填充 SVG 元素？任何解决方法的想法也受到欢迎。
基本上我正在尝试使用Mustache为简单图形制作一个模板系统。用户（另一位开发人员）应该能够使用 CSS 更改图表的样式。
然而我很快发现SVG的fill属性与CSS的功能并不满意linear-gradient()。fill: linear-gradient(#000, #FFF);只会让 Chrome 和 Firefox 都抱怨Invalid property value. 这意味着如果用户想要任何渐变效果，则必须更改 SVG DOM 并添加一个<linearGradient>元素，然后在 中引用它fill。
这在我当前的模板框架中确实是可以实现的，但如果可能的话，我宁愿不更改 DOM。
有任何想法吗？
这个问题询问获得渐变填充的任何方法。这个问题特别要求使用CSS的linear-gradient()功能并避免使用SVG的<linearGradient>元素。