Kaip nustatyti fono vaizdo neskaidrumą CSS?
Fono vaizdo neskaidrumo nustatymas CSS apima naudojimą fono vaizdo nuosavybė kartu su neskaidrumo savybe. Reguliuodami nepermatomumą, galite valdyti fono vaizdo skaidrumą, leidžiančius iš dalies matyti už jo esančius elementus, sukuriant vizualiai sluoksniuotą efektą.
Fono vaizdo neskaidrumui CSS nustatyti taikome šiuos metodus:
Turinys
1. Nepermatomumo savybės naudojimas
The Nepermatomumo ypatybė CSS nustato elemento ir jo turinio skaidrumo lygį. Priėmus vertes nuo 0 (visiškai skaidrus) iki 1 (visiškai nepermatomas), paveikiamas visas elementas, įskaitant jo antrinius elementus, todėl tai yra paprastas ir efektyvus būdas valdyti interneto dizaino skaidrumą.
Sintaksė:
div { opacity: 0.5; } Pavyzdys: Nepermatomumo ypatybė .element klasės CSS stiliuje nustatyta į 0,3, todėl fono vaizdas yra pusiau skaidrus. Taip sureguliuojamas fono matomumas, išlaikant teksto skaitomumą.
HTML
> <> html> lang> => 'en'> >>> <> meta> charset> => 'UTF-8'> >>> content> => 'width=device-width, initial-scale=1.0'> >>> |
>
Išvestis: ![]()
Nepermatomumo savybės naudojimas
2. Pseudoelementų naudojimas:
Norėdami nustatyti fono vaizdo neskaidrumą CSS naudojant pseudoelementai Nepermatomumo ypatybę galite taikyti tiesiogiai pseudoelemento fono paveikslėlyje, valdydami jo skaidrumą nepriklausomai nuo elemento turinio.
Sintaksė:
selector::pseudo-element { property: value; }Pavyzdys: Šiame pavyzdyje fono vaizdo neskaidrumas nustatomas naudojant ::prieš pseudoelementą . Jei reikia, sureguliuokite neskaidrumo lygį. Užtikrinkite teksto matomumą pastatydami jį virš pseudoelemento naudodami z indekso ypatybę.
HTML
><>html>lang>=>'en'>>>><>meta>charset>=>'UTF-8'>>>>>content='>width>=>device>-width,>>initial-scale>=>1>.0'>>>head> GeeksForGeeksh2>
Fono vaizdas su Opacity div> body> html>>>
>
Išvestis: ![]()
Naudojant pseudo elementus