À l'aide de CSS, Google Chrome peut-il créer un effet de couche alpha similaire à un format PNG 24 bits?

Question

Vous pouvez effectuer quelques astuces sympas en utilisant un format PNG 24 bits, qui présente un dégradé allant de opaque à complètement transparent. Les éléments glissant sous ce fichier PNG apparaîtront disparaître tout en s'affaiblissant. Est-ce possible en utilisant uniquement CSS avec Google Chrome? Je n'ai qu'à cibler ce navigateur. Je voudrais éviter une tranche de 1px grands éléments avec opacity ensemble divers.

Merci

Answer 1

Oui, il peut, il suffit d'utiliser un -webkit-gradient avec des valeurs alpha que l'image de fond:

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0))); 

Et si vous êtes ciblez Chrome, vous pouvez également utiliser :before et :after pour ajouter le gradients si vous le vouliez. Voici un exemple rapide. Vous pouvez voir it live on CSSDesk(Cette méthode fonctionne beaucoup plus que Chrome, mais se brise dans la version 3.0 FF et juste ne fonctionne pas dans un certain nombre de versions IE):

div { 
    position: relative; 
} 

div:before, div:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 100px; 
} 


div:before { 
    top: 0; 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0))); 
} 


div:after { 
    bottom: 0; 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1, rgba(255,255,255,1)),color-stop(0, rgba(255,255,255,0))); 
}