HTML establece el color de fondo y la imagen de fondo

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.

Supongo que te gusta

Origin blog.csdn.net/lingjiaxiaozila/article/details/126119803
Recomendado
Clasificación