Fale sobre o universo interno de fundo
Um, o plano de fundo tem esses atributos
Geralmente, é recomendado usar o atributo background em vez de usar um único atributo separadamente, porque esse atributo é melhor suportado em navegadores mais antigos e requer menos letras para serem digitadas.
Esses atributos são muito simples de usar, portanto, não darei exemplos específicos. Eu quero falar sobre a relação entre ele e a modelo
Em segundo lugar, a relação com o modelo de caixa
Ao preencher uma caixa com uma cor de fundo ou imagem de fundo, existe um ditado aqui. Vamos apresentá-lo abaixo.
o fundo e a cor do fundo vão do canto superior esquerdo da borda do elemento ao canto inferior direito
A imagem de fundo é diferente. Ela começa no canto superior esquerdo da borda de preenchimento e termina na borda inferior direita da borda.
Isso pode não estar muito claro. Deixe-me dar alguns exemplos e você entenderá.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
border: 20px dashed #FF0000;
background: #00FFFF;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Analise o código
A cor de fundo que preenchemos vai do canto superior esquerdo da borda do elemento ao canto inferior direito de todo o elemento.
Quando mudamos o fundo: # 00FFFF; para a cor do fundo: # 00FFFF; o efeito é o mesmo da imagem acima.
Vejamos um trecho de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
background: no-repeat;
background-image: url(./images/cat.jpg);
border: 20px dashed #FF0000;
/* background-clip: content-box; */
background-size: auto auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Podemos ver que a imagem de fundo começa no canto superior esquerdo da borda de preenchimento e termina na borda inferior direita da borda.
Então também podemos usar background-clip para alterá-lo para o que quisermos.
background-clip: border-box; // O fundo se estende até a borda externa da borda (mas abaixo da borda)
background-clip: padding-box; // Não há fundo abaixo da borda, ou seja, o fundo se estende para a borda externa da margem interna.
background-clip: content-box; // O fundo é recortado na borda externa da content-box.
Com base no código acima, adicionamos background-clip: border-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
background-image: url(./images/cat.jpg);
border: 20px dashed #FF0000;
background-clip: border-box;
background-size: auto auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Alterar para background-clip: padding-box;
Alterar para background-clip: content-box;
Terceiro, usamos o conhecimento que acabamos de aprender para escrever um efeito como o seguinte
Não fale bobagem, basta ir ao código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
background-color: #00FFFF;
border: 10px dashed #FF0000;
}
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Ou escreva assim, você também pode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: relative;
width: 180px;
height: 180px;
background:#fff;
background-clip:padding-box;
border:10px dashed #FF0000;
}
div::before{
content:"";
position:absolute;
top:-10px;
left:-10px;
bottom:-10px;
right:-10px;
background:#00FFFF;
z-index:-1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
O conteúdo deste artigo baseia-se neste link https://mp.weixin.qq.com/s/OwUx_KUNSsZqpau2pg3nmA