从后面的代码更改背景图像渐变的颜色

Question

我正在创建一个这样的登录按钮：

<%-- login.aspx --%>
<asp:Button runat="server" ID="btnLogin" OnClick="ButtonLoginClick" Text="Anmelden" CssClass="btn" />

/* CSS */
.btn {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    background-image: linear-gradient(to right, #003b67, #0067b4, #003b67);
    background-size: 200%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin: 1rem 0;
    cursor: pointer;
    transition: .5s;
}


.btn:hover {
    background-position: right;
}

结果如下所示：

现在，我正在尝试从代码隐藏中更改渐变的颜色。例如更改文本颜色就可以正常工作

btnLogin.Style.Add("color", "#000");

改变完整的样式也可以这样：

btnLogin.Attributes.Add("style", "background-image: linear-gradient(to right, #ff0000, #ff0000, #ff0000)");

但是，只设置了背景图像，所有其他样式属性都没有了，例如我之前设置的文本颜色。

那么我怎样才能只更改背景图像而保留所有其他属性呢？

编辑：

btnLogin.Style["color"] = "#000";               // works
btnLogin.Style["background-image"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";    // doesn't work

编辑 2： 错误提示：无效属性值

Answer 1

似乎 asp.net escapes/embeds background-image 样式总是在 url 中 - 这就是它不起作用的原因：

btnLogin.Style["background-image"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";

您可以使用 background 代替。这是针对您的情况的解决方法 - 但请记住， background 一次设置背景的所有属性，例如你的 background-size: 200% 需要设置，如果你真的需要它：

btnLogin.Style["background"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";

从后面的代码更改背景图像渐变的颜色

Change colors of background-image gradient from code behind

css

asp.net

code-behind

linear-gradients