Hay dos tipos de imágenes que se pueden utilizar en el fondo y en ambos casos se puede cambiar el color de fondo de la imagen.
- Ráster: las imágenes en las que cada píxel representa el color individual dentro de la imagen. Entonces, cuando hacemos zoom, los píxeles comienzan a agrandarse y, por lo tanto, después de cierto punto, la imagen comienza a desdibujarse.
- Vector: Son las imágenes donde se ha almacenado la información sobre el dibujo. Entonces, cuando se amplían, la imagen se vuelve a dibujar de acuerdo con el tamaño de esa página. De ahí que no se pixelen y obtengamos imágenes nítidas y nítidas. Dado que estas imágenes son escalables, se conocen como SVG (Scalable Vector Graphics).
El SVG significa Scalable Vector Graphics (Gráficos vectoriales escalables) . El fondo SVG se usa para dibujar cualquier tipo de forma, establezca el color que desee mediante la propiedad establecida. Los siguientes ejemplos ilustran el concepto de color de fondo del conjunto SVG de manera más específica. El SVG permitió el tamaño del fondo CSS, la posición y propiedades mucho más complejas.
Ejemplo: Los atributos cx y cy definen las coordenadas x e y del centro del círculo. Si se omiten cx y cy, entonces establece el centro del círculo en (0, 0). El atributo r define el radio del círculo. Para establecer el color de fondo de este SVG, hay dos formas.
html
<!DOCTYPE html> <html> <head> <title> SVG set Background Color </title> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h4>SVG set Background Color</h4> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </center> </body> </html>
Producción:
Para establecer el color de fondo del cuerpo SVG, el fondo se puede hacer de dos maneras:
- Método 1: puede agregar el color de fondo al propio cuerpo SVG.
html
<!DOCTYPE html><html><head><title>SVG set Background Color</title></head><body><center><h1style="color:green;">GeeksforGeeks</h1><h4>SVG set Background Color</h4><svgheight="100"width="100"style="background-color:green"><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/></svg></center></body></html>Producción:
- Método 2: puede agregar un rectángulo como la primera o la capa más baja con 100 % de ancho y 100 % de alto y establecer el color de fondo deseado y luego podemos comenzar a dibujar la forma.
html
<!DOCTYPE html><html><head><title>SVG set Background Color</title></head><body><center><h1style="color:green;">GeeksforGeeks</h1><h4>SVG set Background Color</h4><svgheight="100"width="100"><rectwidth="100%"height="100%"fill="green"/><circlecx="50"cy="50"r="40"stroke="black"stroke-width="3"fill="red"/></svg></center></body></html>Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .