Lahat ng Kailangan Mong Malaman Tungkol sa Opacity Sa CSS

Ipakilala ka ng artikulong ito sa konsepto na makakatulong sa iyo na maunawaan ang opacity sa at sasabihin sa iyo kung paano makontrol ang parameter na ito. Saklaw ang artikulong ito sa artikulong ito,

• Opacity sa CSS
• Ang opacity na minana ng mga elemento ng cascading
• Setting ng RGBA na Katangian para sa mga elemento ng cascading
• Ang mga pagbabago sa opacity sa hover effect

Ang background opacity ng isang elemento ay isang kapaki-pakinabang na setting ng tampok sa disenyo ng HTML. Sa pamamagitan ng pagtatakda sa antas ng opacity (kabaligtaran ng transparency), maaaring makontrol ng isang taga-disenyo ang kakayahang makita ng elemento sa pamamagitan ng pag-aari ng CSS opacity. Sa pangkalahatan ito ay ginagamit bilang isang setting ng background kapag may cascading ng mga elemento, inilagay ang isa sa itaas ng isa pa.

Ang pinakakaraniwang senaryo kung saan ginagamit ang tampok na ito ay ito:

• Ang isang bahagyang transparent na imahe sa background ay inilalagay sa likod ng isang elemento ng teksto.
• Mapanganib na nakikita ang imahe sa background, kaya't hindi nito nangingibabaw ang teksto sa harap.
• Ang imahe ay maaaring maging ganap na pokus kapag ang gumagamit ay malinaw na piniling makita ito.

Baka gusto mong basahin ang bago magpatuloy sa pag-aaral tungkol sa CSS opacity.

Para sa isang komprehensibong tutorial sa CSS, bisitahin Edureka CSS Tutorial Para sa Mga Nagsisimula . Makakakuha ka ng isang mahusay na head-up sa paraang magagamit ang CSS upang madagdagan ang disenyo ng web sa HTML.

Nagpapatuloy sa artikulong ito sa Opacity sa CSS

Opacity sa CSS

Sa CSS, ang Opacity ay itinakda bilang isang numerong halaga na umaabot sa pagitan ng 0.0 - 1.0. Ang mga halagang malapit sa zero ay kumakatawan sa higit na transparency, ang imahe ay magiging napakagaan ng kakayahang makita. Magsimula tayo sa isang halimbawa ng isang imahe na ipinapakita na may 50% transparency. Tingnan ang Halimbawa 1 sa ibaba.

Halimbawa 1: Ang imahe ng background ay nakatakda sa semi- aninaw

img {opacity: 0.5 filter: alpha (opacity = 50) / * Para sa IE8 at mas maaga * /}  

Halimbawa 1: Output

Halimbawa ng pag-log ng log ng java util

Orihinal na Imahe (100% Opacity)

Larawan na may 50% setting ng Opacity

Sa halimbawa sa itaas, mayroon lamang isang elemento - isang imahe. Ang iba pang mga elemento ay maaari ding itakda sa parameter ng opacity tulad ng teksto, mga elemento ng div at iba pa.

Nagpapatuloy sa artikulong ito sa Opacity sa CSS

java ano ang isang halimbawa

Ang opacity na minana ng mga elemento ng cascading

Kapag ang mga elemento ay nakasalansan sa isa't isa, kung ang elemento ng background ay may setting ng opacity, pagkatapos ay minamana ito ng lahat ng mga elemento ng bata. Ito ang default na setting . Nangangahulugan iyon kung ang isang kahon ng teksto ay nakalagay sa isang imahe at ang imahe ay may isang setting ng 0.5 opacity, pagkatapos ang parehong imahe at elemento ng teksto ay bahagyang makikita lamang.

Kunin natin ang halimbawa ng isang elemento ng teksto ng bata na inilagay sa imahe ng TOM & JERRY sa aming susunod na Halimbawa. Maaari naming makita ang default na epekto ng opacity sa Halimbawa 2.

.container {posisyon: kamag-anak text-align: center opacity: 0.5}. nakasentro {posisyon: ganap na tuktok: 50% ang natitira: 50% ibahin ang anyo: isalin ang (-50%, -50%) kulay: asul na font-size: 40px} } TOM & JERRY

Halimbawa 2: Nagmamana ng teksto ang opacity mula sa imaheng magulang

Nagpapatuloy sa artikulong ito sa Opacity sa CSS

Setting ng RGBA na Katangian para sa mga elemento ng cascading

May isa pang paraan kung saan maaaring kontrolin ang opacity gamit ang mga elemento ng cascading. Kung nais mong manatiling hindi naaapektuhan ng elemento ng bata ang elemento ng bata, maaari mo itong magamit Setting ng katangian ng RGBA .

Halimbawa 3: Paggamit ng setting ng RGBA

background: rgba (76, 175, 80, 1.0) / * Ang imahe ay walang setting ng opacity * / / * Green background para sa teksto na may 100% opacity * / / * Ang asul na kulay ng teksto ay may 100% opacity * /

background: rgba (76, 175, 80, 0.4) / * Ang imahe ay walang setting ng opacity * / / * Green background para sa teksto na may 40% opacity * / / * Ang asul na teksto ay nakikita pa rin na may 100% opacity * /

kalamangan at kahinaan ng pag-hack

Matapos ang RGB color code, ang katangiang 'a' ay nangangahulugang alpha . Ang alpha Ang parameter ay isang numero sa pagitan ng 0.0 (ganap na transparent) at 1.0 (ganap na opaque).

Nagpapatuloy sa artikulong ito sa Opacity sa CSS

Ang mga pagbabago sa opacity sa hover effect

Sa ilang mga sitwasyon, nais ng mga taga-disenyo ng web ang opacity na mag-iba depende sa kung ang gumagamit ay nakatuon sa elemento o hindi. Halimbawa, sabihin nating ang isang imahe ay nakatakda sa 50% opacity bilang default. Gayunpaman, kapag inilagay ng gumagamit ang mouse sa imahe, gusto namin na ang imahe ay magkaroon ng buong pokus na may 100% opacity.

Ipinapakita ng halimbawa 4 kung paano ito ginagawa.

Mga karaniwang puntos na dapat tandaan:

• Ang setting ng opacity ay isang kahalili sa paggamit ng katangiang ‘kakayahang makita’ sa CSS. Gayunpaman, ang paggamit ng setting ng opacity ay ginagawang madali upang magtakda ng iba't ibang antas ng transparency, mula sa zero hanggang sa buo.
• Ang antas ng opacity ay maitatakda pagkatapos ng maingat na pagsubok sa iba't ibang mga browser. Kapag ang opacity ay nakatakda sa mababang halaga, kung minsan ang teksto o imahe ay maaaring maging ganap na hindi nakikita o hindi nababasa.
• Ang ideya sa likod ng paggamit ng opacity ay upang maglagay ng matalim na pagtuon sa ilang mga elemento habang ang iba pang mga elemento ng background ay hindi makagagambala ng pansin ng gumagamit. Kaya't ang mga nasabing elemento ng background ay itinakda na may mas mababang opacity.
• Sa Internet Explorer, para sa IE8 at mas luma na mga bersyon, ang pagmamay-ari ng opacity ay isang setting ng ‘filter’ mula 1 hanggang 100. Sa lahat ng iba pang mga browser, mula sa 0 hanggang 1 ang saklaw nito.

Dinadala tayo nito sa pagtatapos ng artikulong ito sa Opacity In CSS.

Kung interesado kang matuto nang higit pa tungkol sa pag-unlad sa web, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).

Kung interesado ka pa rin Kung mayroon kang anumang katanungan, maaari mo itong mai-post sa seksyon ng komento ng blog na 'Opacity In CSS' na ito, at babalikan ka namin sa lalong madaling panahon.