Fundo
plano de fundo@3
Descrição da propriedade: Defina ou obtenha as características de fundo do objeto
Mudança de versão: Sim
Modelo de gramática:
background：[ <bg-layer>, ]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size>@3 ]? || <repeat-style> || <attachment> || <box>@3 || <box>@3 || <background-color>
Valor padrão: definido por propriedade individual
Descrição do valor da propriedade:
<background-image>：指定对象的背景图像，可以是真实图片路径或使用渐变创建的“背景图像”;
<background-position>：指定对象的背景图像位置;
<background-repeat>：指定对象的背景图像如何铺排填充;
<background-attachment>：指定对象的背景图像是随对象内容滚动还是固定的;
<background-color>：指定对象的背景颜色;
/***css3中添加的新属性***/
<background-size>：指定对象的背景图像的尺寸大小;
<background-origin>：指定对象的背景图像显示的原点;
<background-clip>：指定对象的背景图像向外裁剪的区域;
Elementos aplicáveis: todos os elementos
É herdável: Não
Se é animado ou não: defina de acordo com cada propriedade independente
Interface de script: nenhuma
Precauções:
- Um elemento pode definir várias imagens de fundo
- Use vírgulas para separar cada conjunto de atributos.
- Se houver uma intersecção (ou seja, uma relação de sobreposição) entre as múltiplas imagens de fundo definidas, a imagem de fundo anterior será sobreposta à imagem de fundo subsequente.
- A cor de fundo
<background-color>não pode ser definida para vários grupos
cor de fundo
Descrição da propriedade: Defina ou obtenha a cor de fundo do objeto
Modelo de gramática:
background-color：<color>
valor padrão: transparent
Descrição do valor da propriedade:
<color>：指定颜色;
Elementos aplicáveis: todas as cores
É herdável: Não
É animado: sim
Interface de script: backgroundColor
Precauções:
- Quando uma cor de fundo e uma imagem de fundo são definidas, a imagem de fundo se sobrepõe à cor de fundo.
- Se definido
<background-image>, também é recomendado configurá-lo<background-color>para manter um certo contraste com a cor do texto quando a imagem de fundo não estiver visível.
imagem de fundo
Descrição da propriedade: definir ou obter
Modelo de gramática:
background-image：url(" <bg-image> [ , <bg-image> ]* ");
valor padrão: none
Descrição do valor da propriedade:
none：无背景图;
<image>：使用绝对或相对地址指或者创建渐变色来确定图像;
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Não
Interface de script: backgroundImage
Por exemplo: -background:url("1.png") 200px 200px / 100px sem repetição vermelho;
A frente é posição/a parte traseira é repetição
Precauções:
- Se definido
<background-image>, também é recomendado configurá-lo< background-color>para manter um certo contraste com a cor do texto quando a imagem de fundo não estiver visível. - Se vários conjuntos de imagens de fundo forem definidos e houver sobreposição entre as imagens de fundo, a imagem escrita na frente será sobreposta à imagem escrita atrás.
- A URL pode armazenar endereços ou imagens. Quando houver símbolos especiais no nome da imagem, devem ser escritas aspas simples/duplas.
- Várias imagens podem ser definidas ao mesmo tempo, mas só pode haver uma cor de fundo
urlA função é essencial e serve para armazenar endereços ou imagens. Quando houver símbolos especiais no nome da imagem, devem ser escritas aspas. Aspas simples também são aceitáveis.
repetição em segundo plano@3
Descrição da propriedade: Defina ou saiba como dispor e preencher a imagem de fundo do objeto. Você deve primeiro especificar <background-image>a propriedade.
Modelo de gramática:
background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space@3 | round@3 ]{
1,2}
valor padrão: repeat
Descrição do valor da propriedade:
repeat：背景图像在横向和纵向平铺;
repeat-x：背景图像在横向上平铺;
repeat-y：背景图像在纵向上平铺;
no-repeat：背景图像不平铺;
/***css3中添加的新属性***/
round：背景图像自动缩放直到适应且填充满整个容器;
space：背景图像以相同的间距平铺且填充满整个容器或某个方向;
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Não
Interface de script: backgroundRepeat
Precauções:
-
É permitido fornecer
2parâmetros. Se todos2os parâmetros forem fornecidos, o primeiro1será usado para orientação paisagem e o segundo será usado para orientação retrato.
Se apenas1dois parâmetros forem fornecidos, eles serão usados para orientação paisagem e retrato. Exceto para os valores especiaisrepeat-xerepeat-y, porquerepeat-xé equivalente arepeat no-repeat,repeat-yequivalente ano-repeat repeat, ou seja, de fatorepeat-xerepeat-yé equivalente a fornecer2um valor de parâmetro-
Enquanto este valor de arredondamento estiver definido, significa que a repetição está activada.Se o espaço restante num eixo for inferior a metade do tamanho definido da imagem após a imagem ser desenhada,então o número de imagens no eixo permanecerá inalterado e a imagem As dimensões ao longo do eixo serão ampliadas para preencher todo o comprimento do eixo. Pelo contrário (maior que), o número de imagens aumenta em um, o tamanho da imagem é reduzido e preenchido completamente;
-
o espaço determina o número máximo de imagens que podem ser armazenadas em um determinado eixo com base no tamanho da imagem definido, e o espaço restante na direção do eixo é distribuído uniformemente ao espaçamento entre as imagens;
-
cover Então nossa imagem deve cobrir todo o espaço do contêiner. Quando a largura e a altura da imagem são diferentes, precisamos aumentar a largura e a altura do contêiner da imagem para o valor máximo para permitir que a imagem transborde. Durante todo o processo, a imagem deve manter a proporção;
-
conter Quando a proporção da imagem é diferente, é exatamente o oposto da capa. Tomamos o valor mínimo da largura e do centro;
-
Fenômeno:
-
Quando a repetição é redonda e o tamanho é contido, a proporção da imagem muda.Quando o comprimento de um eixo é inferior a dois terços do outro eixo, o comprimento do eixo é distribuído uniformemente pelas duas imagens;
-
Quando a repetição é redonda e o tamanho é capa, a imagem cobrirá 100% de todo o contêiner, e a largura e a altura do contêiner serão a largura e a altura da imagem. Nesse caso, a proporção será alterada;
tamanho do plano de fundo@3
Descrição da propriedade: Defina ou obtenha o tamanho da imagem de fundo do objeto
Modelo de gramática:
background-size：<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{
1,2} | cover | contain
valor padrão: auto
Descrição do valor da propriedade:
<length>：用长度值指定背景图像大小，不允许负值;可以是两个值，用空格分隔；若只有一个值，表示宽度，高度根据图片的宽度来等比缩放；
<percentage>：用百分比指定背景图像大小，不允许负值;
auto：背景图像的真实大小;
cover：将背景图像等比缩放到完全覆盖容器，取宽高中最大值等比缩放图像，背景图像有可能超出容器，超出部分自动隐藏，
contain：中文包含，覆盖整个容器，取宽高中最小值等比缩放图像，背景图像始终被包含在容器内，IE不支持
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Sim, exceto ao usar valor como palavra-chave
Interface de script: backgroundSize
Precauções:
- Esta propriedade fornece
2valores de parâmetros ( exceto valores de propriedadecoverecontain - Se dois forem fornecidos, o primeiro será usado para definir a largura da imagem de fundo e o segundo será usado para definir a altura da imagem de fundo.
- Se apenas um for fornecido, este valor será usado para definir a largura da imagem de fundo. O primeiro
2valor padrão éauto, ou seja, a altura éauto. Neste momento, a imagem de fundo usa a largura fornecida como referência para dimensionar proporcionalmente .
Fenômeno:
- Quando a repetição é redonda e o tamanho é contido, a proporção da imagem muda.Quando o comprimento de um eixo é inferior a dois terços do outro eixo, o comprimento do eixo é distribuído uniformemente pelas duas imagens;
- Quando a repetição é redonda e o tamanho é capa, a imagem cobrirá 100% de todo o contêiner, e a largura e a altura do contêiner serão a largura e a altura da imagem. Nesse caso, a proporção será alterada;
anexo de plano de fundo@3
Descrição da propriedade: Defina ou obtenha se a imagem de fundo rola com o conteúdo do objeto ou é fixa
Mudança de versão: Sim
Modelo de gramática:
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local@3
valor padrão: scroll
Descrição do valor da propriedade:
fixed：背景图像相对于窗体固定，类似于固定定位;
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。即图像子元素不跟父元素滚动，但会随元素的祖先元素或窗体一起滚动;
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。即图像子元素跟父元素滚动。
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Não
Interface de script: backgroundAttachment
Nota:<background-image> os atributos devem ser especificados primeiro
overflow:scroll;Além da porção, uma barra de rolagem é gerada
posição de fundo
Descrição da propriedade: Defina ou obtenha a posição da imagem de fundo do objeto
Modelo de gramática:
background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
Valor padrão: 0% 0% , o efeito é equivalente aleft top
Descrição do valor da propriedade:
<percentage>：用百分比指定背景图像填充的位置，可以为负值;
<length>：用长度值指定背景图像填充的位置，可以为负值;
若只有一个值，表示x轴，另一个值默认为center;
若第一个值描述值，是百分比，数值都作为x轴，描述值可能为y轴；
center：背景图像横向和纵向居中，等同于50% 50%;
left：背景图像在横向上填充从左边开始;
right：背景图像在横向上填充从右边开始;
top：背景图像在纵向上填充从顶部开始;
bottom：背景图像在纵向上填充从底部开始;
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: sim
Interface de script: backgroundPosition
Precauções:
- Se forem fornecidos dois, o primeiro é usado para a abcissa e o segundo para a ordenada
- Se apenas um for fornecido, o valor será usado para a abscissa; a ordenada será padronizada como
50%(ou sejacenter) - Se quatro forem fornecidos, cada
<percentage>deslocamento<length>deverá ser precedido por uma palavra-chave (ou seja,left | center | right | top | bottom) e o deslocamento será relativo à posição da palavra-chave.
posição de fundo
O valor padrão é 0 * 0. Se houver apenas um valor, o outro valor será centralizado;
Se houver apenas um valor, indicando o eixo x,
Se o primeiro valor não for um valor de descrição, mas uma porcentagem, o valor será usado como eixo x e o valor de descrição poderá ser o eixo y.
origem-de-fundo@3
Descrição da propriedade: Defina ou obtenha <background-position> a origem (posição) de referência ao calcular a imagem de fundo do objeto
Modelo de gramática:
background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
valor padrão: padding-box
Descrição do valor da propriedade:
padding-box：从padding区域（含padding）开始显示背景图像;
border-box：从border区域（含border）开始显示背景图像;
content-box：从content区域开始显示背景图像;
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Não
Interface de script: backgroundOrigin
clipe de fundo@3
Descrição da propriedade: Defina ou obtenha a área onde a imagem de fundo do objeto será recortada para fora
Modelo de gramática:
background-clip：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
valor padrão: border-box
Descrição do valor da propriedade:
padding-box：从padding区域（不含padding）开始向外裁剪背景;
border-box：从border区域（不含border）开始向外裁剪背景;
content-box：从content区域开始向外裁剪背景;
Elementos aplicáveis: todos os elementos
É herdável: Não
É animado: Não
Interface de script: backgroundClip
Desenhar origem de referência
background-origin:border-box;
background-clip:padding-box;<!--从哪个位置上开始显示-->
background-image: radial-gradient(250px 250px at 100px 100px,red yellow); x主半径，y次半径，at，x轴，y轴，颜色
background-image: radial-gradient(closest-size ellipse at 100px 100px,red yellow);
closest-size 从圆心点开始，一直到最近的边作为渐变的半径
closet-corner 从圆心点开始，一直到最近的角作为渐变的半径
farthest-size 从圆心点开始，一直到最远的边作为渐变的半径
farthest-corner 从圆心点开始，一直到最远的角作为渐变的半径
circle正圆 ellipse椭圆
注意：这些值不可以采用固定半径值来设置，只能给形状
repeating-radial-gradient