ስለ የሲኤስ 3 አመላካች ይማሩ

አስተዳደግዎን ግልጽ ማድረግ

በድርጅታዊ ንድፍ ውስጥ በቀላሉ ሊያደርጉዋቸው የሚችሉ ነገር ግን በድር ላይ አለመሆኑ በአንድ ምስል ወይም በቀለም ያሸበሸበ ጽሁፍ ላይ የተንጣጣፊ ጽሑፍ ነው, እና ምስሉን ግልጽ ማድረግ እንዲቀይር ይንገሩን. ነገር ግን በ CSS3 ውስጥ ያለ ንብረትዎ የንጥብልዎ ብርሃንን ለመቀየር የሚያስችል እና ለወደፊቱ እንዲቀላቀሉበት ያደርጋል.

የብርዳይ ባህሪን እንዴት እንደሚጠቀሙ

የግራፊቱ ንብረቱ ከ 0.0 እስከ 1.0 የግልጽነት መጠን እሴት ይወስዳል.

0.0% 100% ግልጽ ነው-ከዚያ ነገር በታች የሆነ ነገር ሙሉ በሙሉ ይታያል. 1.0 መቶኛ 100% ድፍጣሽ ነው - ከህገሙ በታች ምንም ነገር አያሳይም.

ስለዚህ ለ 50% ውህቀትን ለማርተግ, ለመጻፍ እንደሚከተለው ይሆናል-

ብርሃን-አልባነት: 0.5;

በተግባር ውስጥ የተወሰኑ የብርሃን ማሳያ ምሳሌዎችን ይመልከቱ

በድሮ ማሰሺያዎች ውስጥ ለመሞከር እርግጠኛ ሁን

IE 6 ወይም 7 የ CSS3 ን ድነት ባህሪን አይደግፉም. ግን ዕድል አልነበራችሁም. ይልቁንም, IE ብቻ የ Microsoft-only property alpha ማጣሪያን ይደግፋል. በአይፕ ውስጥ ያሉ የአልፋ ማጣሪያዎች ከ 0 (ሙሉ ለሙሉ ግልጽ) እስከ 100 (ሙሉ ለሙሉ ግልጽ) የሆኑ እሴቶችን ይቀበላሉ. ስለዚህ, በ IE ውስጥ ግልጽነትዎን ለማግኘት የእርስዎን የብርሃን መጠን በ 100 ማባዛትና ወደ ቅጦችዎ የአልፋ ማጣሪያ ማከል ይችላሉ:

ማጣሪያ: አልፋ (ድነት = 50);

የአልፋ ማጣሪያ በተግባር (IE ብቻ) ይመልከቱ

እና የአሳሽ ቅጥያዎችን ይጠቀሙ

የድሮው የሞዚላ እና የዌብክ ታዋቂዎች ስሪቶችም እንዲደግፉ -mzz- እና -webkit-ቅድመ ቅጥያዎችን መጠቀም አለብዎት.

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
ብርሃን-አልባነት: 0.5;

ሁልጊዜ የቅድመ-ቅጥያውን ቅድመ ቅጥያዎችን ያስቀምጡ, እና ትክክለኛ የ CSS3 ንብረት በመጨረሻ ይቆዩ.

በአሮጌ እና በዌብክ ታዋቂ አሳሽ ውስጥ የአሳሽ ቅጥያዎችን ሞክረው.

ምስሎችንም ግልጽ ማድረግ ይችላሉ

ብርሃን ላይ ያለው ብርሃን ያንጸባረቀው በራሱ እና ወደ ጀርባ ያበቃል. ይህ ለጀርባ ምስሎች በጣም ጠቃሚ ነው.

እና በአንዲት የመልህቅ መለያ ላይ ካከሉ የምስሉ ንብርብሩን በመለወጥ የሆቨር ውጤቶችን መፍጠር ይችላሉ.

a: hover img {
ማጣሪያ: አልፋ (ድነት = 50)
ማጣሪያ: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
ብርሃን-አልባነት: 0.5;
}

ይህንን ኤች ቲ ኤም ኤል ላይ ተፅዕኖ ያሳርፋል

ከላይ ያሉትን ቅጦች እና ኤችቲኤምኤል በተግባር ላይ ይሞክራሉ.

ምስሎችዎን በእርስዎ ምስሎች ላይ ያድርጉ

ከግብዣዎች ጋር, ምስልን በአንድ ምስል ላይ ማስቀመጥ እና ጽሑፍ ጽሑፉ ወደሚገኝበት ቦታ እንዲጠፋ ማድረግ ይችላሉ.

ይህ ዘዴ ትንሽ ረቂቅ ነው, ምክንያቱም ምስሉን በሙሉ መቀነስ ስለማይችሉ, ሙሉ ምስሉን ያቦዘውታል. እና የጽሑፍ ሳጥኑ መቀነስ አይችሉም, ምክንያቱም ጽሁፉም እንዲሁ እዚያው ያበቃል.

1. በመጀመሪያ ኮንቴይነር (DIV) ይፍጠሩ እና ምስልዎን ወደ ውስጥ ያስገቡ:

   
   

2. በባዶ ባልዲ (DIV) ምስሉን ይከተሉ - ይሄ ግልጽ የሚያደርጉትን ነው.

   
   
   

3. በእርስዎ ኤችቲኤምኤል ውስጥ የሚያክሉት የመጨረሻው ነገር በሱ ውስጥ ከጽሑፍዎ ጋር DIV ነው.

   
   
   
   ይህ የእኔ ውሻ ሻስታ ነው. እሱ አይደል?

4. በሲ ኤስ ኤስ አቀማመጡ ላይ, በያዘው ምስል ላይ ምስሉን ለማስቀመጥ. ጽሑፎቼን በግራ በኩል አድርጌ ነበር, ነገር ግን ሁለቱን ግራ በመለወጥ ወደቀኝ መቀየር ይችላሉ. ባህሪዎች ወደ ቀኝ: 0; .

   #image {
   አቀማመጥ: አንጻራዊ;
   ወርድ: 170 ፒክስል;
   ቁመት: 128px;
   ኅዳግ: 0;
   }
   #text {
   አቀማመጥ: ፍጹም;
   ከላይ: 0;
   ወደ ግራ: 0;
   ወርድ: 60px;
   ቁመት: 118px;
   ጀርባ: #fff;
   ማስተካከያ: 5 ፒክስል;
   }
   #text {
   ማጣሪያ: አልፋ (ድነት = 70);
   ማጣሪያ: ፕሮጅክት: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -ሞዞ-ኦሽን-ብርሃን -0.70;
   ብርሃን-ባይነት: 0.7;
   }
   #words {
   አቀማመጥ: ፍጹም;
   ከላይ: 0;
   ወደ ግራ: 0;
   ወርድ: 60px;
   ቁመት: 118px;
   ዳራ; ግልጽ;
   ማስተካከያ: 5 ፒክስል;
   }

እንዴት እንደሚመስል ተመልከት