En overleggsteknikk i CSS er en måte å transponere tekst over bilder. CSS “bakgrunnsbilde”Og CSS“bakgrunn”Egenskaper brukes til å oppnå denne overleggseffekten. Hensikten med denne artikkelen er å utforske hvordan du bruker CSS for å sette et overleggsbilde med farge.

Resultatene av denne artikkelen er:

• • Hva er bakgrunnsbildeegenskaper i CSS?
  • Hva er bakgrunnseiendom i CSS?
  • Hvordan du setter overleggsbilde med farge?

La oss starte!

Bakgrunnsbilde eiendom

For å legge til et bilde som bakgrunnen for eventuelle HTML -elementer, "bakgrunnsbilde”Eiendom kan brukes.

Syntaks

Syntaksen til bakgrunnsbilde-egenskapen er:

Bakgrunnsbilde: bilde url ();

Spesifiser bildetavnet eller dens komplette bane i URL -en ().

Hva er bakgrunnseiendom i CSS?

Det er en shorthand -egenskap som brukes til å tilordne forskjellige verdier til bildet, for eksempel farge, størrelse, posisjon og så videre.

Syntaks

Syntaks for bakgrunnsegenskapen er:

Bakgrunn: Farge | stilling | størrelse;

• • farge: Den brukes til å tilordne bakgrunnsfarge.
  • posisjon: Det brukes til å sette bakgrunnsposisjon.
  • størrelse: Den brukes til å spesifisere bakgrunnsstørrelsen.

Her er et eksempel for å forklare poenget.

Eksempel: Hvordan sette overleggsbilde med farge?

I dette eksemplet først vil vi lage en div, kalt "overlegg”Og inne i diven har vi lagt til en håndtering med

stikkord:

Bildeoverlegg

Nå vil vi legge til et bakgrunnsbilde ved hjelp av CSS. Som "URL ()”, Vi har gitt bildebanen og tildelt bredden”350px, høyde “250px”, Og posisjon“Absolutt”Av bildet:

.bilde
Bakgrunn: URL ("Bilde.jpg ") ingen repetisjon;
Bredde: 350px;
Høyde: 250px;
Posisjon: Absolutt;

Dette vil gi følgende utdata:

La oss nå flytte et skritt videre for å bruke overleggseffekten på det:

.overlay
Bakgrunn: RGBA (233, 140, 0, 0.7);
Margin-top: 10px;
margin-venstre: 55px;
Bredde: 200px;
Font-størrelse: 25px;
Farge: RGB (252, 80, 0);
Posisjon: Absolutt;

Her benyttet vi forskjellige CSS -egenskaper for å tjene forskjellige funksjonaliteter:

• • bakgrunn: Vi har tildelt en overleggsfarge ved hjelp av bakgrunnsegenskaper.
  • margin: For å spesifisere plasseringen av overlegget, bruk marginegenskapen.
  • bredde: Denne parameteren spesifiserer størrelsen på overlegget som vises over bakgrunnsbildet.
  • skriftstørrelse: Den spesifiserer skriftstørrelsen.
  • farge: Angir tekstfargen.
  • posisjon: Definerer hvor teksten vil vises.

Etter implementeringen av ovennevnte punkter, lagre HTML- og CSS-filkoden og sjekk resultatet:

Vi har tilbudt metoden for å sette et overleggsbilde med farge i CSS.

Konklusjon

Overleggseffekten kan oppnås ved å bruke CSS “bakgrunnsbilde”Og CSS“bakgrunn" egenskaper. Det kan gjøres ved å tilordne et bilde til bakgrunnsbildeegenskapen og sette fargen i bakgrunnsegenskapen. Dessuten er det en teknikk for å kombinere mer enn ett element i en enkelt beholder. Dette innlegget demonstrerte hvordan du satte overleggsbilder med farge i CSS ved hjelp av eksempler.