contente
renderizações
Realize as funções de tonificação, ajuste de nitidez e mudança de cor
Pontos cegos encontrados
1. <label> geralmente é compartilhado com <input>
vantagem:
- O texto do rótulo não é apenas associado visualmente ao seu elemento de entrada de texto correspondente, mas também de forma programática. Isso significa que os leitores de tela podem ler o rótulo quando o usuário se concentra nesse elemento de entrada do formulário, tornando mais fácil para os usuários de tecnologia assistiva entender quais dados devem ser inseridos.
- Você pode clicar no rótulo associado para focar ou ativar o elemento de entrada, assim como clicar diretamente no elemento de entrada. Isso expande a área clicável do elemento, tornando mais fácil para os usuários, incluindo aqueles que usam dispositivos touchscreen, ativar o elemento.
Para combinar um <label> com um elemento <input>, você precisa dar ao <input> um atributo id. E <label> requer um atributo for com o mesmo valor que o id do <input> .
por
Ou seja , o id do elemento associado ao rótulo no mesmo documento que o elemento <label> . O primeiro elemento do documento cujo valor de id é igual ao valor do atributo for do elemento <label>, caso possa ser associado a um rótulo (labelable), é um controle com um rótulo associado, e seu rótulo é este elemento <label>. O atributo for não tem efeito se o elemento não estiver associado a uma tag. Se houver outros elementos no documento com o mesmo valor de id que o atributo for, o atributo for não terá efeito sobre esses elementos.
Nota: O elemento <label> pode ter um atributo for e um elemento de controle filho ao mesmo tempo, mas o atributo for precisa apontar para o elemento de controle.
Exemplo:
rótulo simples
<label>Clique em mim <input type=“text”></label>
Use o atributo for
<label for=“username”>Clique em mim</label>
<input type=“texto” id=“username”>
Problemas de acessibilidade:
Conteúdo interativo:
Não coloque elementos interativos como âncoras ou botões dentro do elemento label . Isso torna mais difícil para o usuário ativar/disparar o elemento de entrada do formulário associado ao rótulo.
Onde()
Visão geral
A função var() pode substituir qualquer parte do valor em qualquer atributo do elemento. A função var() não pode ser usada como nomes de propriedades, seletores ou outros valores que não sejam valores de propriedade. (Fazer isso geralmente produz uma sintaxe inválida ou um valor que não está associado a uma variável.)
gramática
O primeiro parâmetro do método é o nome da propriedade customizada a ser substituída. O segundo parâmetro opcional da função é usado como um valor de fallback. Se a propriedade customizada referenciada pelo primeiro parâmetro for inválida, a função usará o segundo valor.
var( <custom-property-name> , <declaration-value> ? )
Observação: vírgulas são permitidas para valores de fallback para propriedades personalizadas. Por exemplo, var(--foo, red, blue) especifica vermelho, azul como valores de fallback; ou seja, qualquer valor após a primeira vírgula até o final da função é considerado como fallback.
defina em :root e use-o
:raiz {
--main-bg-color: rosa;
}
corpo {
cor de fundo: var(--main-bg-color);
}
Copiar para área de transferência
Quando o primeiro valor é indefinido, o valor de fallback entra em vigor
/* valor de retorno */
/* Define um valor no estilo do elemento pai */
.component {
--text-color: #080; /* a cor do cabeçalho não está definida*/
}
/* Use-o no estilo do componente: */
.componente .texto {
color: var(--text-color, black); /* o valor normal da cor aqui --text-color */
}
.componente .cabeçalho {
color: var(--header-color, blue); /* aqui a cor volta para azul */
}
filtro
A propriedade de filtro CSS aplica efeitos gráficos como desfoque ou mudança de cor aos elementos. Os filtros são frequentemente usados para ajustar a renderização de imagens, planos de fundo e bordas.
opacidade()
opacity() transforma a transparência da imagem. O valor de quantidade define a escala da conversão. Um valor de 0% é completamente transparente e um valor de 100% não resulta em nenhuma alteração na imagem. Valores entre 0% e 100% são multiplicadores lineares para o efeito. Também equivalente a multiplicar as amostras de imagem pelo número. Se o valor não for definido, o valor padrão será 1. Esta função é muito parecida com a propriedade de opacidade existente, a diferença é que através do filtro, alguns navegadores fornecem aceleração de hardware para melhorar o desempenho.
escala de cinza()
A função grayscale() irá alterar a escala de cinza da imagem de entrada. O valor de quantidade define a escala da conversão. Um valor de 100% converte completamente a imagem em tons de cinza e um valor de 0% deixa a imagem inalterada. Valores entre 0% e 100% são multiplicadores lineares para o efeito. Se nenhum valor for definido, o padrão é 0.
borrão()
Indica o desfoque desta imagem
Código fonte
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线图片修饰器 使用JS修饰CSS变量</title>
</head>
<body>
<h2>Update CSS Variables with <span class='h1'>JS</span></h2>
<div class="controls">
<!-- label与input一般同时使用//还有range的特殊操作，左边界与右边界进行设置 value就是位置啊-->
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="./留言板.jpg" alt="">
<style>
:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
--grayscale: 0%;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur)) grayscale(var(--grayscale));
width: 66%;
}
.h1{
color: var(--base);
}
body {
text-align: center;
background: #193549;
color:white;
font-family: 'helvetica neue', sans-serif;
/* 表示了字体的粗细程度 */
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
</style>
<script>
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
// 用于改变CSS样式
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change',handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
</script>
</body>
</html>