Советы по CSS | Одна строка кода для реализации слияния аватара и национального флага

внешний интерфейс CSS
Советы по CSS | Одна строка кода для реализации слияния аватара и национального флага

Это Национальный день, и все хотят отпраздновать день рождения Родины.

Каждый год в это время популярно украшать аватарку национальным флагом в WeChat Moments, а в этом году популярно:

эм, очень хорошо.

Итак, как быстро получить желаемую аватарку, объединив изображение национального флага с нашей аватаркой, как это просто реализовать с помощью CSS?

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

Используя маску в CSS, одна строка кода реализует слияние аватара и национального флага.

В CSS нам просто нужно наложить два изображения друг на друга и использовать свойство маски для верхнего изображения, и одной строкой кода можно добиться этого эффекта.

<div></div>

div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // 正常头像
    background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // 国旗图片
    background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

В приведенном выше коде мы использовалиdivи один из его псевдоэлементовdiv::after, аватар и национальный флаг накладываются друг на друга.

просто нужноdiv::after, установите слой маски маскиmask: linear-gradient(110deg, #000 10%, transparent 70%, transparent), мы можем реализовать умную компоновку аватара и национального флага:

Краткое знакомство с Маской

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

По сути, способ использования маски — это использование изображения, например:

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位图来做遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */
}

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

Подобно следующему использованию:

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来做遮罩 */
}

Вот такая картинка, наложенная с градиентом от прозрачного к черному,

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

image

После применения маски это будет выглядеть так:

image

В этой ДЕМО вы можете кратко понять основы использования маски.

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

Стоит отметить, что градиент выше используетlinear-gradient(90deg, transparent, #fff),здесь#fffФактически, часть сплошного цвета можно изменить на любой цвет, не влияя на эффект.

Демонстрация CodePen — базовое использование с MASK

Некоторые другие приемы использования маски

Конечно, после освоения Маска можно играть много цветов.

Например, вышеупомянутый аватар национального флага, с которым мы можем сотрудничатьCSS @property, чтобы добиться некоторых интересных эффектов при наведении:

Или используйте маску, чтобы добиться некоторых интересных эффектов перехода:

Даже персонажи на веб-сайте экрана пули блокируют экран пули.Реализовано с использованием маски CSS:

Если вы хотите узнать больше о CSS MASK, вы можете также прочитать эти две статьи:

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные эффекты CSS могут следовать за мнойCSS-вдохновение

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории