Foghlaim Maidir le Dlúthracht CSS3

Making Your Backgrounds Trédhearcach

Is é ceann de na rudaí is féidir leat a dhéanamh go héasca i ndearadh an chló ach ní ar an nGréasán ná téacs ar íomhá nó cúlra daite a athrú, agus trédhearcacht an íomhá sin a athrú ionas go dtéann an téacs isteach sa chúlra. Ach tá maoin ann i CSS3 a ligfidh duit do dhlúthchumais do chuid eilimintí a athrú ionas go mbeidh siad ag casadh amach agus amach: dlúsacht.

Conas an Maoin Choibhneasta a Úsáid

Bíonn luach na trédhearcachta ó 0.0 go 1.0 ar luach na maoine inmharthanachta.

Is é 0.0% 100% trédhearcach - ní bheidh aon rud thíos faoin eilimint sin a thaispeáint go hiomlán trí. 1.0 is 100% teimhneach-níl faoi bhun na heilimintí.

Mar sin, gné a leagan síos go 50% trédhearcach, scríobhfeadh tú:

inmharthanacht: 0.5;

Féach roinnt samplaí de dhliteacht i ngníomh

Bí cinnte go bhfuilstáil i mBrabhsálaithe Scothaosta

Ní thacaíonn IE 6 ná 7 maoin dhliteanas CSS3. Ach níl t-ádh ort. Ina áit sin, tacaíonn IE le scagán alfa maoine Microsoft-amháin. Glactar le luachanna Alfa in IE luachanna 0 (go hiomlán trédhearcach) go 100 (go hiomlán teimhneach). Mar sin, chun do thrédhearcacht a fháil in IE, ba cheart duit do dhliteacht a mhéadú faoi 100 agus scagaire alfa a chur le do stíleanna:

scagaire: alfa (opacity = 50);

Féach an scagaire alfa i ngníomh (IE amháin)

Agus Réimseanna Brabhsálaí a Úsáid

Ba cheart duit na réamhshuímh -moz- and -webkit- a úsáid ionas go dtabharfaidh leaganacha níos sine de bhrabhsálaithe Mozilla agus Webkit é freisin:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
inmharthanacht: 0.5;

Cuir réimigh an bhrabhsálaí ar dtús, agus an mhaoin CSS3 bailí go deireanach.

Scrúdaigh na réamhshuímh bhrabhsálaí i mbrabhsálaithe Gréasáin Mozilla agus Gréasáin níos sine.

Is féidir leat Íomhánna a dhéanamh Trédhearcach Too

Socraigh an dlúthracht ar an íomhá féin agus beidh sé céimnithe sa chúlra. Tá sé seo an-úsáideach le haghaidh íomhánna cúlra .

Agus má chuireann tú i gclib ancaire, is féidir leat éifeachtaí hover a chruthú ach trí dhlúthracht na híomhá a athrú.

a: hover img {
scagaire: alfa (opacity = 50)
scagaire: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
inmharthanacht: 0.5;
}

Tionchar ar an HTML seo:

Tástáil na stíleanna thuas agus HTML i ngníomh.

Cuir Téacs ar Do Íomhánna

Le héagothroime, is féidir leat téacs a chur thar íomhá agus an chuma ar an íomhá a bheith céimnithe amach sa chás go bhfuil an téacs sin.

Níl an teicníc seo beagán deacair, toisc nach féidir leat an íomhá a chadú, mar go mbeidh an íomhá ar fad ag céimniú. Agus ní féidir leat an bosca téacs a chasc , toisc go mbeidh an téacs céimnithe ann chomh maith.

1. Ar dtús, cruthaíonn tú coimeádán DIV agus cuir do íomhá taobh istigh:

   
   

2. Lean an íomhá le DIV folamh mar seo a dhéanfaidh tú trédhearcach.

   
   
   

3. Is é an rud deireanach a chuirfidh tú i do HTML an DIV le do théacs ann:

   
   
   
   Is é seo mo mhadra Shasta. Nach bhfuil sé gleoite!

4. Stíl tú é le suíomh CSS, chun an téacs thuas an íomhá a chur. Chuir mé mo théacs ar an taobh clé, ach is féidir leat é a chur ar dheis ag athrú an dá chlé: 0; airíonna ar dheis: 0; .

   #íomha {
   seasamh: coibhneasta;
   leithead: 170px;
   airde: 128px;
   imeall: 0;
   }
   #text {
   seasamh: iomlán;
   barr: 0;
   clé: 0;
   leithead: 60px;
   airde: 118px;
   cúlra: #fff;
   stuáil: 5px;
   }
   #text {
   scagaire: alfa (opacity = 70);
   scagaire: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   inmharthanacht: 0.7;
   }
   #words {
   seasamh: iomlán;
   barr: 0;
   clé: 0;
   leithead: 60px;
   airde: 118px;
   cúlra: trédhearcach;
   stuáil: 5px;
   }

Féach ar conas a bhreathnaíonn sé