Переход CSS: непрозрачность против изменения цвета фона? - PullRequest
Новая
       20

Переход CSS: непрозрачность против изменения цвета фона?

0 голосов
/ 23 марта 2019

Мне любопытно, существует ли отраслевой стандарт для перехода цвета, поскольку существует несколько способов достижения желаемого эффекта перехода.

Существует несколько способов сделать конкретный цвет ярче или темнее, чтобы указать пользователю, что элемент трудно поддается обработке.

Например, если у вас есть тег p и вы хотите добавить эффект наведения, вы можете:

HTML

<div><p> P tag text </p></div>

CSS v1 с использованием непрозрачности 

div {
background-color:black;
}

p {
color: white;
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
}

p:hover {
opacity: 1;
}

CSS v2 с использованием цвета 

div {
background-color:black;
}

p {
color: #ccc;
transition: color 0.2s ease-in-out;
}

p:hover {
color: #fff;
}

Насколько мне известно, оба метода дают схожие результаты, однако мне все еще интересно, есть липравильный способ сделать это.

1 Ответ

1 голос
/ 23 марта 2019

Главное, что вы должны понимать, это то, что opacity влияет на весь элемент и все его потомки, тогда как color и background-color нет.

В вашем простом примере белый текст с уменьшенной непрозрачностьюна сплошном черном фоне выглядит серым, поэтому визуальный эффект в основном такой же, как и изменение color с серого на чисто белый.

Но в любом более сложном примере - скажем, фон родительского элемента div вашего абзацаэто изображение, а не сплошной цвет, или вы используете непрозрачность для элемента, который содержит другие элементы, а не только для текста - в итоге вы получите вещи, которые действительно выглядят прозрачными.Это также может означать, что текст становится все труднее читать.

Таким образом, ответ будет не столько о том, что существует какой-то конкретный отраслевой стандарт, а о выборе правильного инструмента для работы.Если вы просто хотите сделать какой-нибудь текст более светлым, перейдите непосредственно к color.Если вы хотите сделать вещи прозрачными, используйте opacity.

Это теория, во всяком случае, но в реальной жизни иногда это не так чисто.Возможно, дизайнер дает вам макет с текстом color: #C44242; opacity: 0.87 поверх сплошного фона background-color: #B48927.Вы можете вычислить, какой будет непрозрачная версия этого цвета текста, но это может не стоить вашего времени, чтобы сделать это.Мир не закончится, если вы просто придерживаетесь непрозрачности.

...