1: background-color define a cor de fundo
2:background-image para definir a imagem de fundo
- Sintaxe: background-image:url (caminho relativo);
- Você pode especificar uma cor de fundo e uma imagem de fundo para um elemento ao mesmo tempo,
Esta cor de fundo será usada como a cor de fundo da imagem de fundo
- a posição da imagem dentro do elemento
Se a imagem de plano de fundo for menor que o tamanho do elemento, a imagem de plano de fundo será dividida para preencher o elemento por padrão
Se a imagem de fundo for maior que o elemento, o canto superior esquerdo da imagem será exibido por padrão
Se a imagem de fundo for do mesmo tamanho do elemento, a imagem de fundo será exibida em sua totalidade
3:background-repeat é usado para definir o modo de repetição da imagem de fundo
Valores opcionais:
repeat, o valor padrão, a imagem de fundo será repetida em ambas as direções (lado a lado)
no-repeat , a imagem de fundo não será repetida e será exibida tão grande quanto é
repeat-x, a imagem de fundo se repete horizontalmente
repeat-y, a imagem de fundo se repete verticalmente
4:background-position pode ajustar a posição da imagem de fundo no elemento
A imagem de fundo é exibida no canto superior esquerdo do elemento por padrão
Valores opcionais:
Esta propriedade pode usar dois valores no centro superior direito esquerdo inferior
para especificar a localização de uma imagem de fundo
superior esquerdo superior esquerdo
canto inferior direito canto inferior direito
Se apenas um valor for fornecido, o segundo valor padrão será o centro
Você também pode especificar dois deslocamentos diretamente,
O primeiro valor é o deslocamento horizontal
- Se for especificado um valor positivo, a imagem será deslocada para a direita pelos pixels especificados
- Se for especificado um valor negativo, a imagem será deslocada para a esquerda pelos pixels especificados
O segundo é o deslocamento vertical
- Se um valor positivo for especificado, a imagem será deslocada para baixo pelos pixels especificados
- Se for especificado um valor negativo, a imagem será deslocada para cima pelo pixel especificado
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
margin: 0 auto;
/* 需求1:添加背景色 */
background-color: blueviolet;
/* 需求2:添加背景图片 */
background-image: url(./img/gaitubao_小图_png.png);
/* 需求3:虽然图小，但图片我只要一张*/
background-repeat: no-repeat;
/* 需求4:调整背景图片在元素中的位置 */
background-position:-50px -50px;
}
</style>
</head>
<body>
<div class="box1">
嗣专一冇纯即，助也。jwdjdjfasadf
</div>
</body>
</html>5.background-clipe
Definir o alcance do plano de fundo
Valores opcionais:
border-box Valor padrão, a cor de fundo aparecerá abaixo da borda
O fundo da caixa de preenchimento não aparecerá na borda, apenas na área de conteúdo e preenchimento
o fundo da caixa de conteúdo aparece apenas na área de conteúdo
6:background-origem
Defina a origem do cálculo do deslocamento da imagem de fundo, usado em conjunto com o deslocamento
padding-box é calculado a partir da distância interna. Valor padrão
O deslocamento da imagem de fundo da caixa de conteúdo é calculado a partir da área de conteúdo
border-box calcula o deslocamento da borda
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
padding: 20px;
border: 20px red double;
margin: 0 auto;
/*设置一个背景颜色*/
background-color: #bfa;
background-clip: content-box;
background-image: url(./img/gaitubao_小图_png.png);
background-repeat: no-repeat;
background-position: 100px 100px;
background-origin: border-box;
}
.box2{
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<!-- <div class="box2"></div> -->
</div>
</body>
</html>7:background-size define o tamanho da imagem
parâmetro:
Primeiro valor: largura
Segundo valor: altura
Se apenas um for escrito, o segundo valor é automático por padrão
A proporção da imagem da capa permanece inalterada e os elementos da caixa são cobertos
conter A proporção da imagem permanece inalterada e os elementos da imagem são totalmente exibidos
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
background-color: green;
background-image: url(./img/大图2.webp);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
height: 300px;
width: 300px;
/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/* 设置图片大小 */
/* background-size:cover ; */
/* 设置图片偏移的原点 */
/* background-origin: padding-box; */
/* 设置背景的范围 */
/* background-clip: padding-box; */
/*
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前谁在后都行
也没有数量的要求，不写的样式就使用默认值
-background-size要写在background-position后面
*/
background: #bfa url("./img/小图2.webp") center/200px no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>2. Sprite image
1. Tecnologia de integração de imagens (CSS-Sprite)
vantagem:
1 Para integrar várias imagens em uma imagem, o navegador só precisa enviar uma solicitação e pode carregar várias imagens ao mesmo tempo,
Melhore a eficiência do acesso e melhore a experiência do usuário.
2 Integre várias imagens em uma imagem, reduza o tamanho total da imagem, aumente a velocidade da solicitação e melhore a experiência do usuário
2. Etapas para usar o Sprite
1: Primeiro determine o ícone a ser usado
2: Meça o tamanho do ícone
3: Crie um elemento com base na medição
4: Defina a imagem do sprite como plano de fundo do elemento
5: Defina um deslocamento para exibir a imagem correta
Leopardo no tubo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
a {
display: block;
width: 250px;
height: 78px;
background-color: pink;
background-image: url(./img/亚马逊.png);
}
a:hover{
background-position: 0 -80px;
}
a:active{
background-position: 0 -660px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>3. Gradiente de cor
Gradiente: algumas cores de fundo complexas podem ser definidas por meio de gradientes, e o efeito da transição de uma cor para outras cores pode ser realizado
O gradiente é uma imagem, definida por background-image
valor opcional
1: gradiente linear (orientação, cor 1, cor 2) ['ɡreidiənt]
Gradiente linear, onde a cor muda ao longo de uma linha reta
Parâmetro 1: Indica a orientação, (valor opcional, se não for escrito, o padrão é para baixo)
(1) para a esquerda, para a direita, para baixo, para cima
(2) xxxdeg significa ângulo, grau, será mais flexível
(3) virar significa círculo 0,5 volta
Parâmetro 2: Cor 1
Parâmetro 3: Cor 2
Perceber:
Várias cores podem ser escritas. Por padrão, as cores são divididas igualmente
Você também pode especificar manualmente a distribuição do gradiente
background-image:linear-gradient(red 50px,yellow);
A cor é diretamente seguida pela proporção
2: gradiente linear repetitivo ()
Gradientes lineares que podem ser lado a lado
imagem de fundo: gradiente linear repetitivo (amarelo 0px, vermelho 50px);
Os parâmetros são os mesmos que gradiente linear
<!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>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
/* background-color: red; */
/* background-image: linear-gradient(red 20px,yellow); */
background-image: repeating-linear-gradient(red 10px,yellow 20px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>4. Gradiente radial
1: radial-gradient() ['reidiəl] ['ɡreidiənt]
Gradiente Meridiano (Efeito da Radiação)
Por padrão, o centro do círculo é calculado com base na forma do elemento
quadrado redondo
oval retangular
Parâmetro 1: a forma do centro do círculo
(1) círculo, elipse,
(2) Defina o tamanho na posição ==> pixel 1 pixel 2 em 0px 0px
imagem de fundo: gradiente radial (100px 100px a 100px 0px, vermelho, amarelo);
Parâmetro 2: Cor 1
Parâmetro 3: Cor 2
<!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>Document</title>
<style>
.box1 {
width: 400px;
height: 200px;
/* background-image: radial-gradient(red,yellow); */
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>