Fondo
fondo@3
Descripción de la propiedad: establece u obtiene las características de fondo del objeto.
Cambio de versión: Sí
Plantilla 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 predeterminado: establecido por propiedad individual
Descripción del valor de la propiedad:
<background-image>：指定对象的背景图像，可以是真实图片路径或使用渐变创建的“背景图像”;
<background-position>：指定对象的背景图像位置;
<background-repeat>：指定对象的背景图像如何铺排填充;
<background-attachment>：指定对象的背景图像是随对象内容滚动还是固定的;
<background-color>：指定对象的背景颜色;
/***css3中添加的新属性***/
<background-size>：指定对象的背景图像的尺寸大小;
<background-origin>：指定对象的背景图像显示的原点;
<background-clip>：指定对象的背景图像向外裁剪的区域;
Elementos aplicables: todos los elementos
¿Es heredable? No
Si está animado o no: configurado según cada propiedad independiente
Interfaz de secuencias de comandos: ninguna
Precauciones:
- Un elemento puede establecer múltiples imágenes de fondo.
- Utilice comas para separar cada conjunto de atributos.
- Si hay una intersección (es decir, una relación de superposición) entre las múltiples imágenes de fondo establecidas, la imagen de fondo anterior se superpondrá a la imagen de fondo posterior.
- El color de fondo
<background-color>no se puede establecer en varios grupos
color de fondo
Descripción de la propiedad: establece u obtiene el color de fondo del objeto
Plantilla de gramática:
background-color：<color>
valor por defecto: transparent
Descripción del valor de la propiedad:
<color>：指定颜色;
Elementos aplicables: todos los colores
¿Es heredable? No
¿Está animado? Sí
Interfaz de guión: backgroundColor
Precauciones:
- Cuando se definen tanto un color de fondo como una imagen de fondo, la imagen de fondo se superpone al color de fondo.
- Si está configurado
<background-image>, también se recomienda configurarlo<background-color>para mantener un cierto contraste con el color del texto cuando la imagen de fondo no sea visible.
imagen de fondo
Descripción de la propiedad: establecer u obtener
Plantilla de gramática:
background-image：url(" <bg-image> [ , <bg-image> ]* ");
valor por defecto: none
Descripción del valor de la propiedad:
none：无背景图;
<image>：使用绝对或相对地址指或者创建渐变色来确定图像;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? No
Interfaz de guión: backgroundImage
Por ejemplo: -fondo:url("1.png") 200px 200px / 100px rojo sin repetición;
El frente es posición / la espalda es repetición
Precauciones:
- Si está configurado
<background-image>, también se recomienda configurarlo< background-color>para mantener un cierto contraste con el color del texto cuando la imagen de fondo no sea visible. - Si se definen varios conjuntos de imágenes de fondo y hay superposición entre las imágenes de fondo, la imagen escrita en el frente se superpondrá a la imagen escrita en la parte posterior.
- La URL puede almacenar direcciones o imágenes. Cuando hay símbolos especiales en el nombre de la imagen, se deben escribir comillas simples o dobles.
- Se pueden configurar varias imágenes al mismo tiempo, pero solo puede haber un color de fondo
urlLa función es esencial y se utiliza para almacenar direcciones o imágenes. Cuando hay símbolos especiales en el nombre de la imagen, se deben escribir comillas. También se aceptan comillas simples.
repetición-de-fondo@3
Descripción de la propiedad: establezca u obtenga cómo diseñar y rellenar la imagen de fondo del objeto. Primero debe especificar <background-image>la propiedad.
Plantilla 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 por defecto: repeat
Descripción del valor de la propiedad:
repeat：背景图像在横向和纵向平铺;
repeat-x：背景图像在横向上平铺;
repeat-y：背景图像在纵向上平铺;
no-repeat：背景图像不平铺;
/***css3中添加的新属性***/
round：背景图像自动缩放直到适应且填充满整个容器;
space：背景图像以相同的间距平铺且填充满整个容器或某个方向;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? No
Interfaz de guión: backgroundRepeat
Precauciones:
-
Se permite proporcionar parámetros. Si se proporcionan
2todos los parámetros, el primero se utilizará para la orientación horizontal y el segundo para la orientación vertical. Si solo se proporcionan dos parámetros, se utilizan para orientación horizontal y vertical. Excepto por los valores especiales y , porque es equivalente a , equivalente a , es decir, de hecho y es equivalente a proporcionar un valor de parámetro211repeat-xrepeat-yrepeat-xrepeat no-repeatrepeat-yno-repeat repeatrepeat-xrepeat-y2-
Siempre que se establezca este valor de ronda, significa que la repetición está activada. Si el espacio restante en un eje es menor que la mitad del tamaño establecido de la imagen después de dibujar la imagen, entonces el número de imágenes en el eje permanecerá sin cambios y la imagen Las dimensiones a lo largo del eje se ampliarán para llenar toda la longitud del eje. Por el contrario (mayor que), el número de imágenes aumenta en uno, el tamaño de la imagen se reduce y se llena por completo;
-
el espacio determina la cantidad máxima de imágenes que se pueden almacenar en un determinado eje según el tamaño de imagen establecido, y el espacio restante en la dirección del eje se distribuye uniformemente al espacio entre imágenes;
-
cover Entonces nuestra imagen debe cubrir todo el espacio del contenedor. Cuando el ancho y el alto de la imagen son diferentes, necesitamos aumentar el ancho y el alto del contenedor de la imagen al valor máximo para permitir que la imagen se desborde. Durante todo el proceso, la imagen debe mantener la relación de aspecto;
-
contener Cuando la relación de aspecto de la imagen es diferente, es todo lo contrario de la portada, tomamos el valor mínimo del ancho y el centro;
-
Fenómeno:
-
Cuando la repetición es redonda y el tamaño es contenido, la relación de aspecto de la imagen cambiará. Cuando la longitud de un eje es menor que dos tercios del otro eje, la longitud del eje se distribuye uniformemente entre las dos imágenes;
-
Cuando la repetición es redonda y el tamaño es cobertura, la imagen cubrirá el 100% de todo el contenedor, y el ancho y el alto del contenedor son el ancho y el alto de la imagen. En este caso, la relación de aspecto cambiará;
tamaño-fondo@3
Descripción de la propiedad: establece u obtiene el tamaño de la imagen de fondo del objeto
Plantilla de gramática:
background-size：<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{
1,2} | cover | contain
valor por defecto: auto
Descripción del valor de la propiedad:
<length>：用长度值指定背景图像大小，不允许负值;可以是两个值，用空格分隔；若只有一个值，表示宽度，高度根据图片的宽度来等比缩放；
<percentage>：用百分比指定背景图像大小，不允许负值;
auto：背景图像的真实大小;
cover：将背景图像等比缩放到完全覆盖容器，取宽高中最大值等比缩放图像，背景图像有可能超出容器，超出部分自动隐藏，
contain：中文包含，覆盖整个容器，取宽高中最小值等比缩放图像，背景图像始终被包含在容器内，IE不支持
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? Sí, excepto cuando se usa valor como palabra clave.
Interfaz de guión: backgroundSize
Precauciones:
- Esta propiedad proporciona
2valores de parámetros ( excepto valores de propiedadcoverycontain - Si se proporcionan dos, el primero se usa para definir el ancho de la imagen de fondo y el segundo se usa para definir la altura de la imagen de fondo.
- Si solo se proporciona uno, este valor se usará para definir el ancho de la imagen de fondo. El primer
2valor predeterminado esauto, es decir, la altura esauto. En este momento, la imagen de fondo usa el ancho proporcionado como referencia para escalar proporcionalmente. .
Fenómeno:
- Cuando la repetición es redonda y el tamaño es contenido, la relación de aspecto de la imagen cambiará. Cuando la longitud de un eje es menor que dos tercios del otro eje, la longitud del eje se distribuye uniformemente entre las dos imágenes;
- Cuando la repetición es redonda y el tamaño es cobertura, la imagen cubrirá el 100% de todo el contenedor, y el ancho y el alto del contenedor son el ancho y el alto de la imagen. En este caso, la relación de aspecto cambiará;
archivo adjunto de fondo@3
Descripción de la propiedad: establezca u obtenga si la imagen de fondo se desplaza con el contenido del objeto o es fija
Cambio de versión: Sí
Plantilla de gramática:
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local@3
valor por defecto: scroll
Descripción del valor de la propiedad:
fixed：背景图像相对于窗体固定，类似于固定定位;
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。即图像子元素不跟父元素滚动，但会随元素的祖先元素或窗体一起滚动;
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。即图像子元素跟父元素滚动。
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? No
Interfaz de guión: backgroundAttachment
Nota:<background-image> los atributos deben especificarse primero
overflow:scroll;Más allá de la porción, se genera una barra de desplazamiento.
posición de fondo
Descripción de la propiedad: establece u obtiene la posición de la imagen de fondo del objeto
Plantilla 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 predeterminado: 0% 0% , el efecto es equivalente aleft top
Descripción del valor de la propiedad:
<percentage>：用百分比指定背景图像填充的位置，可以为负值;
<length>：用长度值指定背景图像填充的位置，可以为负值;
若只有一个值，表示x轴，另一个值默认为center;
若第一个值描述值，是百分比，数值都作为x轴，描述值可能为y轴；
center：背景图像横向和纵向居中，等同于50% 50%;
left：背景图像在横向上填充从左边开始;
right：背景图像在横向上填充从右边开始;
top：背景图像在纵向上填充从顶部开始;
bottom：背景图像在纵向上填充从底部开始;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? Sí
Interfaz de guión: backgroundPosition
Precauciones:
- Si se proporcionan dos, el primero se usa para la abscisa y el segundo para la ordenada.
- Si solo se proporciona uno, el valor se utilizará para la abscisa; la ordenada será por defecto
50%(es decircenter) - Si se proporcionan cuatro, cada uno
<percentage>o<length>desplazamiento debe ir precedido de una palabra clave (es decir,left | center | right | top | bottom) y el desplazamiento se compensa en relación con la posición de la palabra clave.
posición en el fondo
El valor predeterminado es 0 * 0. Si solo hay un valor, el otro valor está por defecto en el centro;
Si solo hay un valor, que indica el eje x,
Si el primer valor no es un valor de descripción, sino un porcentaje, el valor se utiliza como el eje x y el valor de descripción puede ser el eje y.
origen-antecedentes@3
Descripción de la propiedad: establezca u obtenga <background-position> el origen (posición) de referencia al calcular la imagen de fondo del objeto
Plantilla de gramática:
background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
valor por defecto: padding-box
Descripción del valor de la propiedad:
padding-box：从padding区域（含padding）开始显示背景图像;
border-box：从border区域（含border）开始显示背景图像;
content-box：从content区域开始显示背景图像;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? No
Interfaz de guión: backgroundOrigin
clip-de-fondo@3
Descripción de la propiedad: establezca u obtenga el área donde la imagen de fondo del objeto se recorta hacia afuera
Plantilla de gramática:
background-clip：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
valor por defecto: border-box
Descripción del valor de la propiedad:
padding-box：从padding区域（不含padding）开始向外裁剪背景;
border-box：从border区域（不含border）开始向外裁剪背景;
content-box：从content区域开始向外裁剪背景;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? No
Interfaz de guión: backgroundClip
Dibujar origen de referencia
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