Გაეცნოთ CSS3 გამჭრიახობას

გამჭვირვალე ფონის შექმნა

ერთი რამ, რაც მარტივად შეგიძლიათ გააკეთოთ ბეჭდვით დიზაინში, მაგრამ არა ინტერნეტში სურათის ან ფერის ფონზე გადაფარვის ტექსტი და ამ სურათის გამჭვირვალობის შეცვლა, ისე, რომ ტექსტში შეიცვალოს ფონზე. მაგრამ არსებობს ქონება CSS3 , რომელიც საშუალებას მოგცემთ შეცვალოთ opacity თქვენი ელემენტები ისე, რომ მათ ქრებოდა და გარეთ: opacity.

როგორ გამოვიყენოთ უკმაყოფილება ქონება

გამჭვირვალობის ღირებულება ხდება გამჭვირვალობის ოდენობით 0.0-დან 1.0-მდე.

0.0 არის 100% გამჭვირვალე-არაფერი ქვემოთ რომ ელემენტი გამოჩნდება მთლიანად მეშვეობით. 1.0 არის 100% გაუმჭვირვალე - არაფერი ქვემოთ ელემენტს გამოჩნდება მეშვეობით.

ასე რომ, ელემენტის 50% გამჭვირვალედ ჩამოყალიბება, წერს:

opacity: 0.5;

იხილეთ სამოქმედო სიმბოლოების ზოგიერთი მაგალითი

დარწმუნდით, რომ მოხდეს ძველი ბრაუზერების ტესტირება

არც IE 6 და არც 7 მხარდაჭერა CSS3 opacity ქონების. მაგრამ თქვენ არ გისურვებთ. ამის ნაცვლად, IE მხარს უჭერს Microsoft- ის მხოლოდ ალფა ფილტრი. Alpha ფილტრები IE- ს მიიღებენ ღირებულებებს 0 (სრულიად გამჭვირვალე) 100 (სრულიად გაუმჭვირვალე). ასე რომ, IE- ში გამჭვირვალობის მისაღებად, 100 ლარით უნდა გაიზარდოს თქვენი სიმბოლოთი და დაამატეთ ალფა ფილტრი თქვენს სტილებს:

ფილტრი: ალფა (opacity = 50);

იხილეთ ალფა ფილტრი მოქმედებაში (მხოლოდ IE)

და გამოიყენეთ ბრაუზერის პრეფიქსები

თქვენ უნდა გამოიყენოთ -moz- და- webbit- პრეფიქსები ისე, რომ Mozilla და Webkit ბრაუზერების უახლესი ვერსიები მასაც უჭერენ მხარს:

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

ყოველთვის დააყენა ბრაუზერი პრეფიქსის პირველი და სწორი CSS3 ქონება ბოლო.

შეამოწმოთ ბრაუზერის პრეფიქსები ძველი Mozilla და Webkit ბრაუზერებში.

სურათების გამჭვირვალე

დააყენეთ opacity on იმიჯი თავად და ეს იქნება ქრებოდა ფონზე. ეს მართლაც სასარგებლოა სურათებისთვის .

და თუ თქვენ დაამატებთ წამყვანმა tag შეგიძლიათ შექმნათ hover ეფექტები მხოლოდ შეცვლის opacity იმიჯი.

a: hover img {
ფილტრი: ალფა (opacity = 50)
ფილტრი: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

გავლენას ახდენს ეს HTML:

შეამოწმე ზემოთ სტილისა და HTML მოქმედებაში.

განათავსეთ ტექსტი თქვენს სურათებზე

ერთად opacity, თქვენ შეგიძლიათ განათავსოთ ტექსტი მეტი იმიჯი და აქვს გამოსახულება, როგორც ჩანს, ქრებოდა, სადაც ეს ტექსტი არის.

ეს ტექნიკა არის პატარა სახიფათო, იმიტომ, რომ თქვენ ვერ უბრალოდ fade იმიჯი, როგორც ეს იქნება ქრებოდა მთელი იმიჯი. ტექსტის ყუთს ვერ გაბედავთ, რადგან ტექსტიც იქაც ქრება.

1. პირველ რიგში შექმნა კონტეინერი DIV და განათავსეთ თქვენი სურათი:

   
   

2. დაიცავით გამოსახულება ცარიელი DIV - ეს არის ის, რაც თქვენ გახდის გამჭვირვალე.

   
   
   

3. ბოლო რაც თქვენ დაამატებთ თქვენს HTML- ში არის DIV ტექსტით თქვენს ტექსტში:

   
   
   
   ეს ჩემი ძაღლი შასტაა. არ არის ის cute!

4. თქვენ სტილი ს CSS პოზიციონირებით, მოათავსეთ ტექსტის ზემოთ გამოსახულება. მე დავტოვე ჩემი ტექსტი მარცხენა მხარეს, მაგრამ თქვენ შეგიძლიათ უფლება დააყენოთ ორი მარცხნივ: 0; თვისებები მარჯვნივ: 0; .

   #image {
   პოზიცია: ნათესავი;
   სიგანე: 170px;
   სიმაღლე: 128px;
   ზღვარი: 0;
   }
   #text {
   პოზიცია: აბსოლუტური;
   დაბრუნება: 0;
   მარცხნივ: 0;
   სიგანე: 60px;
   სიმაღლე: 118px;
   ფონზე: # ff;
   padding: 5px;
   }
   #text {
   ფილტრი: ალფა (opacity = 70);
   ფილტრი: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   #words {
   პოზიცია: აბსოლუტური;
   დაბრუნება: 0;
   მარცხნივ: 0;
   სიგანე: 60px;
   სიმაღლე: 118px;
   ფონზე: გამჭვირვალე;
   padding: 5px;
   }

ნახეთ როგორ გამოიყურება