color de fondo
color de fondo : color transparente
transparente: el color de fondo es transparente color: especifique el color de fondo
- Establecer directamente el atributo de estilo de la etiqueta (estilo en línea)
Ejemplo: establecer el fondo de este párrafo en rojo
- Establecer con un selector (estilo incrustado, estilo de enlace externo)
Ejemplo (etiquetas en línea con estilos en línea):
Hay cuatro formas de expresar el color: (escriba directamente la palabra de color, #+número hexadecimal, rgb(x,x,x), rgba(x,x,x,x) el último dígito representa la transparencia del color)
Ejemplo: cuatro formas de expresión (la izquierda flotante se agrega al cuadro div)
.boxThree>div{
float: left;
}
</style>
<body>
<div class="boxThree">
<div style="background-color:red; width: 40px;height: 40px;">1</div>
<div style="background-color:rgb(255,255,20) ;width: 40px;height: 40px;">2</div>
<div style="background-color:#f0f ;width: 40px;height: 40px;">3</div>
<div style="background-color:rgba(255, 0, 0, 0.5); width: 40px;height: 40px;">4</div>
</div>
</body>
Efecto:
Imagen de fondo:
- background-img :url(): Importar imagen
- background-repeat : método de mosaico (repetir mosaicos (predeterminado) tanto en el eje x como en el eje y, repeat-x llena repetidamente a lo largo de la dirección del eje x, repeat-y llena repetidamente a lo largo de la dirección del eje y, sin repetición no se repite )
Efectos de estilo: repetir-x/repetir-y/ no-repetir
- tamaño de fondo : tamaño de la imagen (ancho y alto (establezca un valor específico o automático), la cubierta cubre todo el cuadro, puede desbordarse, el contenido cubre la pantalla tanto como sea posible sin desbordarse )
Efecto de estilo: establezca el ancho y la altura usted mismo (esta representación está configurada para ser tan ancha como el contenedor, y la altura es automática) /cover/ contain
- posición de fondo : posición de la imagen de fondo de longitud/posición (los ejes x e y se utilizan para ajustar la posición de la imagen de fondo o mostrar una determinada posición)
Si solo se especifica un valor, ese valor se utilizará para la abscisa. El eje vertical por defecto será del 50%. El segundo valor es la ordenada. El valor se puede escribir en inglés, números o números negativos . El posicionamiento de esta propiedad no se ve afectado por la configuración de la propiedad padding .
longitud: porcentaje | valor de longitud que consta de un número de coma flotante y un identificador de unidad. posición: arriba | centro | abajo | izquierda |
Efecto de estilo: 100 %/posición (escritura de palabras en la parte superior derecha)/posición de escritura digital (ejemplo de imagen de Sprite)
- Propiedad compuesta de fondo de fondo {combinar las imágenes de arriba y el fondo juntos}
fondo : color de fondo || imagen de fondo || repetición de fondo || posición de fondo
color de fondo No necesita configurar el color de fondo al configurar la imagen de fondo (también puede configurarlo si es necesario)
- adjunto de fondo: fijación de imagen de fijador (generalmente se usa cuando la imagen de fondo está configurada para una página web larga, la imagen es fija y no se desplaza con la barra de desplazamiento)
La imagen de muestra proviene de Internet. Si hay alguna infracción, comuníquese con el autor para eliminarla. Gracias.