Šis straipsnis supažindins jus su sąvoka, kuri padės suprasti neskaidrumą ir pasakykite, kaip valdyti šį parametrą. Tolimesni patarimai bus aptarti šiame straipsnyje,
- Neskaidrumas CSS
- Nepermatomumas paveldėtas kaskadiniais elementais
- RGBA Kaskadinių elementų atributų nustatymas
- Neskaidrumas keičiasi užvedimo efektu
Fono elemento nepermatomumas yra naudingas HTML dizaino funkcijų nustatymas. Nustatydamas neskaidrumo lygį (atvirkštinis skaidrumas), dizaineris gali valdyti elemento matomumą per CSS nepermatomumo ypatybę. Tai paprastai naudojama kaip fono nustatymas, kai yra kaskadiniai elementai, išdėstyti vienas virš kito.
Dažniausias scenarijus, kai naudojama ši funkcija, yra toks:
- Iš dalies skaidrus fono paveikslėlis dedamas už teksto elemento.
- Fono vaizdas yra miglotai matomas, todėl jis nedominuoja priešais esančiame tekste.
- Vaizdas gali būti visiškai sufokusuotas, kai vartotojas aiškiai nusprendžia jį pamatyti.
Galbūt norėsite paskaityti prieš pradedant mokytis apie CSS nepermatomumą.
Norėdami gauti išsamią CSS mokymo programą, apsilankykite „Edureka CSS“ pamoka pradedantiesiems . Jūs gausite puikų susimąstymą apie tai, kaip CSS turi būti naudojama HTML web dizainui pagerinti.
Toliau su šiuo straipsniu apie neskaidrumą CSS
Neskaidrumas CSS
CSS neskaidrumas nustatomas kaip skaitinė vertė, kuri svyruoja tarp 0,0–1,0. Arčiau nulio esančios vertės rodo didesnį skaidrumą, vaizdas bus labai lengvai matomas. Pradėkime nuo 50% skaidrumo rodomo vaizdo pavyzdžio. Žr. Toliau pateiktą 1 pavyzdį.
1 pavyzdys: fono paveikslėlis nustatytas į pusiau skaidrumas
img {neskaidrumas: 0,5 filtras: alfa (neskaidrumas = 50) / * IE8 ir ankstesnėms versijoms * /} 
1 pavyzdys: Rezultatas
Originalus vaizdas (100% neskaidrumas)
Vaizdas su 50% neskaidrumo nustatymu
Ankstesniame pavyzdyje buvo tik vienas elementas - vaizdas. Kitus elementus taip pat galima nustatyti naudojant neskaidrumo parametrą, pvz., Tekstą, „div“ elementus ir pan.
Toliau su šiuo straipsniu apie neskaidrumą CSS
kas yra pagrindinis rakto suvaržymas
Nepermatomumas paveldėtas kaskadiniais elementais
Kai elementai yra sukrauti vienas ant kito, jei fono elementas turi neskaidrumą, tada jį paveldi visi antriniai elementai. Tai yra Numatytasis nustatymas . Tai reiškia, kad jei teksto laukelis yra virš vaizdo, o jo vaizdas yra neskaidrumo nustatymas, tada ir vaizdas, ir teksto elementas bus matomi tik iš dalies.
Paimkime antrojo teksto elemento, įdėto ant TOM & JERRY paveikslėlio, pavyzdį kitame pavyzdyje. Numatytąjį neskaidrumo efektą galime pamatyti 2 pavyzdyje.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absoliučiai viršuje: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRY2 pavyzdys: tekstas paveldi nepermatomumą iš pirminio vaizdo
Toliau su šiuo straipsniu apie neskaidrumą CSS
RGBA Kaskadinių elementų atributų nustatymas
Yra dar vienas būdas neskaidrumą valdyti kaskadiniais elementais. Jei norite, kad vaiko elementas nebūtų paveiktas jo fono elemento neskaidrumo, galite naudoti RGBA atributo nustatymas .
3 pavyzdys: RGBA nustatymo naudojimas
fonas: rgba (76, 175, 80, 1.0) / * Vaizdas neturi drumstumo nustatymo * / / * Žalias teksto fonas su 100% neskaidrumu * / / * Mėlynos spalvos tekstas turi 100% neskaidrumą * /
fonas: rgba (76, 175, 80, 0,4) / * Vaizdas neturi drumstumo nustatymo * / / * Žalias teksto fonas su 40% neskaidrumu * / / * Mėlynas tekstas vis dar matomas su 100% neskaidrumu * /
Po RGB spalvų kodo atributas „a“ reiškia alfa . The alfa parametras yra skaičius tarp 0,0 (visiškai skaidrus) ir 1,0 (visiškai nepermatomas).
Toliau su šiuo straipsniu apie neskaidrumą CSS
Neskaidrumas keičiasi užvedimo efektu
Kai kuriais atvejais interneto dizaineriai nori, kad neskaidrumas skirtųsi, atsižvelgiant į tai, ar vartotojas sutelkia dėmesį į elementą, ar ne. Tarkime, pagal numatytuosius nustatymus vaizdas yra nustatytas 50% neskaidrumu. Tačiau kai vartotojas užveda pelės žymeklį virš vaizdo, mes norime, kad vaizdas būtų visiškai sufokusuotas su 100% neskaidrumu.
4 pavyzdyje parodyta, kaip tai daroma.
Bendri dalykai, į kuriuos reikia atkreipti dėmesį:
- Neskaidrumo nustatymas yra alternatyva atributo „matomumas“ naudojimui CSS. Tačiau naudojant neskaidrumo nustatymą lengva nustatyti įvairius skaidrumo laipsnius, svyruojančius nuo nulio iki visiško.
- Nepermatomumo lygis turi būti nustatytas atidžiai išbandžius įvairiose naršyklėse. Kai nustatoma maža neskaidrumo vertė, kartais tekstas ar vaizdas gali tapti visiškai nematomas arba neįskaitomas.
- Neskaidrumo naudojimo idėja yra sutelkti dėmesį į kai kuriuos elementus, o kiti fono elementai neblaško vartotojo dėmesio. Taigi tokie fono elementai nustatomi mažesniu neskaidrumu.
- „Internet Explorer“ IE8 ir senesnėms versijoms nepermatomumo ypatybė yra „filtro“ nustatymas, svyruojantis nuo 1 iki 100. Visose kitose naršyklėse jis svyruoja nuo 0 iki 1.
Tai leidžia mums baigti šį straipsnį apie neskaidrumą CSS.
Jei norite sužinoti daugiau apie žiniatinklio kūrimą, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).
Jei vis tiek domitės Jei turite kokių nors klausimų, galite juos paskelbti šio „Opacity In CSS“ tinklaraščio komentarų skyriuje, ir mes kuo greičiau susisieksime su jumis.