Измените цвета градиента фонового изображения из кода позади - PullRequest
Новая
       42

Измените цвета градиента фонового изображения из кода позади

1 голос
/ 03 августа 2020

Я создаю такую ​​кнопку входа в систему: 

<%-- 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;
}

результат выглядит так: enter image description here

now, I am trying to change the colors of the gradient from code behind. for example changing the text color just works fine

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

changing the complete style also works like this:

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

but then, only the background-image is set and all other style attributes are gone, for example the textcolor I set before.

So how can I only change background-image but keep all other attributes?

EDIT:

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

EDIT 2: введите описание изображения здесь Ошибка говорит: недопустимое значение свойства

1 Ответ

1 голос
/ 03 августа 2020

Похоже, что asp. net экранирует / встраивает стиль 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)";
...