1. Introdução ao atributo mix-blend-mode 2. Valores de atributos comuns do mix-blend-mode 3. Aplicação do atributo mix-blend-mode 1. Efeito do aplicativo 2. Código relacionado 4. Fundo de adaptação inteligente de texto 1. Estilo original 2. Adicionar Mix 3. Código de implementação
O [ atributo mix-blend-mode ] em CSS descreve como o conteúdo de um elemento deve ser combinado com o conteúdo do elemento pai imediato do elemento e com o plano de fundo do elemento ;
Usado para definir o modo de mesclagem entre o plano de fundo e o primeiro plano de um elemento; pode ser aplicado a qualquer elemento; pode ser usado com o atributo background-image para criar uma variedade de efeitos visuais diferentes;
| número de série | valor do atributo | Modos de mesclagem e instruções |
|---|---|---|
| 1 | modo mix-blend: normal ; | Normal: Esta propriedade não aplica nenhuma mesclagem; |
| 2 | modo mix-blend: multiplicar ; | Multiplicar: O elemento é multiplicado pelo fundo e substitui a cor do fundo. A cor resultante é sempre tão escura quanto o fundo; |
| 3 | modo mix-blend: sobreposição ; | Sobreposição: multiplica ou mascara o conteúdo com base na cor de fundo, em oposição ao modo de mesclagem Hard Light; |
| 4 | modo mix-blend: tela ; | Tela: multiplique o plano de fundo e o conteúdo e complemente o resultado. Isso fará com que o conteúdo fique mais claro que a cor de fundo; |
| 5 | modo mix-blend: escurecer ; | Escurecer ; quando o conteúdo for escurecido, o fundo será substituído pelo conteúdo, caso contrário permanecerá como está; |
| 6 | modo mix-blend: iluminar ; | Clarear: O fundo é substituído por um conteúdo mais claro; |
| 7 | modo mix-blend: esquiva de cores ; | Color Lighten: Esta propriedade clareia a cor de fundo para refletir a cor do conteúdo; |
| 8 | modo mix-blend: queima de cor ; | Clareamento de cor: escurece o fundo para refletir a cor natural do conteúdo; |
| 9 | modo mix-blend: luz forte ; | Luz forte: Dependendo da cor do conteúdo, esta propriedade irá filtrá-lo ou multiplicá-lo; |
| 10 | modo mix-blend: luz suave ; | Soft Light: Dependendo da cor do conteúdo, isso irá escurecê-lo ou clareá-lo; |
| 11 | modo mix-blend: diferença ; | Diferença : Isso subtrairá a mais escura das duas cores da cor mais clara; |
| 12 | modo mix-blend: exclusão ; | Excluir : Semelhante a Diferença, mas com menor contraste; |
| 13 | modo mix-blend: matiz ; | Matiz : Cria cor combinando a tonalidade do conteúdo com a saturação e brilho do fundo; |
| 14 | modo mix-blend: saturação ; | Saturação : Cria cor através da saturação do conteúdo e da matiz e brilho do fundo; |
| 15 | modo mix-blend: cor ; | Mistura de cores: Crie cores com base no matiz e saturação do conteúdo e no brilho do fundo; |
| 16 | modo mix-blend: luminosidade ; | Luminosidade : Cria cores com base na luminosidade do conteúdo e na matiz e saturação do fundo. Isto é o oposto da propriedade color; |
normal: este atributo não aplica nenhuma mistura.multiply: o elemento é multiplicado pelo fundo e substitui a cor do fundo. A cor resultante é sempre tão escura quanto o fundo.screen: multiplica o fundo e o conteúdo complementa o resultado. resulta em um conteúdo mais brilhante que o background-color.overlay : multiplica ou filtra o conteúdo dependendo da cor de fundo. Este é o inverso do modo de mistura de luz forte.darken : o fundo é substituído pelo conteúdo onde o conteúdo está. mais escuro, caso contrário, será deixado como estava.lighten: o fundo é substituído pelo conteúdo onde o conteúdo é mais claro.color-dodge: este atributo ilumina a cor do fundo para refletir a cor do conteúdo.color-burn: isso escurece o fundo para refletir a cor natural do conteúdo.hard-light: dependendo da cor do conteúdo, este atributo irá exibi-lo ou multiplicá-lo.soft-light: dependendo da cor do conteúdo, isso irá escurecê-lo ou clareá-lo.difference: isso subtrai o mais escuro dos dois cores da cor mais clara.exclusão: semelhante à diferença, mas com menor contraste.hue: cria uma cor com a tonalidade do conteúdo combinada com a saturação e luminosidade do fundo.saturação: cria uma cor com a saturação do conteúdo combinada com o matiz e a luminosidade do fundo.color: cria uma cor com o matiz e a saturação do conteúdo e a luminosidade do fundo.luminosity: cria uma cor com a luminosidade do conteúdo e o matiz e saturação do fundo Este é o inverso do atributo de cor.
Clique de exibição do efeito
Aplicação do atributo mix-blend-mode
<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
<meta charset="UTF-8">
<meta name="viewport" content="largura=largura do dispositivo, escala inicial=1,0">
<title>Aplicação do atributo mix-blend-mode</title>
<estilo>
* {
margem: 0;
preenchimento: 0;
}
.contêiner {
/* Definir variáveis */
--mix-blend-mode: normal;
posição: relativa;
largura: 300px;
altura: 400px;
margem: 60px;
preenchimento: 20px;
sombra da caixa: 0 0 6px 1px #999;
raio da borda: 6px;
cor do cursor: transparente;
}
h3,
h4 {
margem inferior: 10px;
}
.caixa de informações {
largura: 100%;
altura: 24px;
altura da linha: 24px;
}
.círculo {
posição: absoluta;
largura: 200px;
altura: 200px;
raio da fronteira: 50%;
modo mix-blend: var(--mix-blend-mode);
}
.caixa vermelha {
esquerda: 70px;
superior: 160px;
cor de fundo: vermelho;
}
.caixa verde {
esquerda: 30px;
superior: 220px;
cor de fundo: verde claro;
}
.caixa azul {
esquerda: 110px;
superior: 220px;
cor de fundo: azul;
}
</estilo>
</head>
<corpo>
<div class="contêiner">
<h3>Aplicação do atributo mix-blend-mode</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="círculo caixa vermelha"></div>
<div class="círculo caixa verde"></div>
<div class="círculo caixa azul"></div>
</div>
</body>
<roteiro>
// Obtém os elementos var container = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//A lista de valores e a descrição do atributo mix-blend-mode;
var valores = [
{
identificação: 1,
nome: "normal",
valor: "normal",
info: "Esta propriedade não aplica nenhuma mistura;"
},
{
identificação: 2,
nome: "multiplicar",
valor: "multiplicar",
info: "O elemento é multiplicado pelo fundo e substitui a cor do fundo. A cor resultante é sempre tão escura quanto o fundo;"
},
{
identificação: 3,
nome: "sobreposição",
valor: "sobreposição",
info: "Multiplicar ou mascarar o conteúdo com base na cor de fundo; isso é o oposto do modo de mesclagem de luz forte;"
},
{
identificação: 4,
nome: "tela",
valor: "tela",
info: "Multiplique o plano de fundo e o conteúdo e complemente o resultado. Isso fará com que o conteúdo seja mais claro que a cor de fundo;"
},
{
identificação: 5,
nome: "Escuro",
valor: "escurecer",
info: "Quando o conteúdo estiver escurecido, o fundo será substituído pelo conteúdo, caso contrário, permanecerá como está;"
},
{
identificação: 6,
nome: "iluminar",
valor: "clarear",
info: "O plano de fundo foi substituído por um conteúdo mais claro;"
},
{
identificação: 7,
nome: "Cor desbota",
valor: "desvio de cor",
info: "Esta propriedade clareia a cor de fundo para refletir a cor do conteúdo;"
},
{
identificação: 8,
nome: "Cor desbota",
valor: "queimadura de cor",
info: "Isso escurece o fundo para refletir a cor natural do conteúdo;"
},
{
identificação: 9,
nome: "luz dura",
valor: "hard-light",
info: "Esta propriedade irá filtrar ou multiplicar o conteúdo com base em sua cor."
},
{
identificação: 10,
nome: "luz suave",
valor: "luz suave",
info: "Dependendo da cor do conteúdo, isso irá escurecê-lo ou clareá-lo;"
},
{
identificação: 11,
nome: "Diferença",
valor: "diferença",
info: "Isso subtrairá a mais escura das duas cores da cor mais clara;"
}, {
identificação: 12,
nome: "excluir",
valor: "exclusão",
info: "Semelhante à diferença, mas com menor contraste;"
},
{
identificação: 13,
nome: "Matiz",
valor: "matiz",
info: "Crie cores combinando a tonalidade do conteúdo com a saturação e o brilho do fundo;"
},
{
identificação: 14,
nome: "saturação",
valor: "saturação",
info: "Crie cores a partir da saturação do conteúdo e do matiz e brilho do fundo;"
},
{
identificação: 15,
nome: "Mistura de cores",
valor: "cor",
info: "Crie uma cor com base no matiz e saturação do conteúdo e no brilho do fundo;"
},
{
identificação: 16,
nome: "brilho",
valor: "luminosidade",
info: "Cria uma cor baseada na luminosidade do conteúdo e no matiz e saturação do fundo. Isto é o oposto de uma propriedade de cor;"
}
]
alterarModo();
//Muda o modo mix-blend
function changeMode() {
deixe índice = 0;
modAttr(índice);
deixe timerId = setInterval(() => {
if (índice >= valores.comprimento) {
clearInterval(timerId);
retornar;
}
índice++;
modAttr(índice)
}, 3000)
}
função modAttr(índice) {
//Definir o valor da propriedade mix-blend-mode container.style.setProperty('--mix-blend-mode',values[index].value);
valueBox.innerHTML = `modo mix-blend: ${valores[index].valor};`;
infoBox.innerHTML = `${valores[índice].nome}(${valores[índice].valor}): ${valores[índice].info}`
}
</script>
</html>Muitas vezes, o texto precisa ser exibido próximo à imagem. Se a cor do texto e da imagem estiverem próximas, a legibilidade será seriamente afetada;
Como posso fazer com que o texto se adapte automaticamente ao plano de fundo?
Você pode usar o atributo mix-blend-mode para definir a mistura de cores do texto e do plano de fundo para obter o efeito de adaptação do texto ao plano de fundo;
A cor do texto é branca; a legibilidade é ruim em algumas imagens;
.grid-item> h3 {
cor: rgb(255, 255, 255);
...
}
Defina o atributo mix-blend-mode como Difference ;
O valor inicial da cor do texto é branco, mas a diferença será calculada com o valor da cor de cada pixel correspondente ao fundo do elemento pai para obter um novo valor de cor;
Valor da cor do texto - valor da cor de fundo = valor de pixel misto (cada pixel);
Por exemplo: cor do texto (255, 255, 255), cor de fundo (255, 255, 255), valor calculado (0, 0, 0), exibido em preto;
.grid-item>h3 {
cor: rgb(255, 255, 255);
/* Define o modo de mesclagem -- calcula a diferença */
modo mix-blend: diferença;
...
}Nota: O modo de mesclagem diferente aqui é aplicado ao texto;
<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
<meta charset="UTF-8">
<meta name="viewport" content="largura=largura do dispositivo, escala inicial=1,0">
<title>O texto se adapta de forma inteligente ao plano de fundo</title>
<estilo>
* {
margem: 0;
preenchimento: 0;
}
.contêiner {
exibição: flexível;
largura: 100vw;
altura: 60vh;
justificar-conteúdo: centro;
alinhar itens: centro;
}
.grid-container {
exibição: grade;
colunas de modelo de grade: 400px 400px 400px;
linhas de modelo de grade: 200px 200px;
lacuna: 10px;
}
.grid-item {
repetição em segundo plano: sem repetição;
tamanho do fundo: capa;
raio da borda: 6px;
sombra da caixa: 0 0 6px 1px #999;
}
.grid-item>h3 {
cor: rgb(255, 255, 255);
tamanho da fonte: 36px;
/* Define o modo de mesclagem -- calcula a diferença */
modo mix-blend: diferença;
}
.grid-item:nth-child(1) {
/* imagem de fundo: url("D:\teste\zyl-img\bg_1.jpg");
cor de fundo: vermelho
}
.grid-item:nth-child(2) {
/* imagem de fundo: url("D:\test\zyl-img\bg_2.jpg");
cor de fundo: roxo;
}
.grid-item:nth-child(3) {
/* imagem de fundo: url("D:\test\zyl-img\bg_3.jpg");
cor de fundo: amarelo;
}
.grid-item:nth-child(4) {
/* imagem de fundo: url("D:\teste\zyl-img\bg_4.jpg");
cor de fundo: verde;
}
.grid-item:nth-child(5) {
/* imagem de fundo: url("D:\test\zyl-img\bg_5.jpg");
cor de fundo: azul-petróleo;
}
.grid-item:nth-child(6) {
/* imagem de fundo: url("D:\test\zyl-img\bg_6.jpg");
cor de fundo: azul;
}
</estilo>
</head>
<corpo>
<div class="contêiner">
<div class="grid-container">
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Aplicação do atributo mix-blend-mode</h3>
</div>
</div>
</div>
</body>
</html>Isso conclui este artigo sobre a explicação detalhada do atributo mix-blend-mode em CSS (definindo o modo mix de um elemento). Para obter mais informações sobre o atributo css mix-blend-mode, pesquise artigos anteriores em downcodes.com ou). Continue navegando pelos artigos relevantes abaixo e espero que você apoie downcodes.com no futuro!