web-dev-qa-db-fra.com

Linear Fonder Div, Contenu et Bordure (solide au sommet de la transparence en bas)

Dupliquer possible:
[.____] est-il possible d'obtenir une obtention de l'opacité d'un élément HTML?

J'essaie d'obtenir une div (et sa frontière et sa limite) pour s'effacer dans la transparence (c'est-à-dire solide en haut et transparent en bas) à l'aide de CSS.

Y a-t-il un moyen de faire cela?

Ive a été capable de fader l'arrière-plan avec les éléments suivants:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

mais je n'ai pas été capable de trouver un moyen de le faire au contenu/à la frontière de la DIV. Peut-être avec une sorte de nidification ou une superposition?

[~ # ~] Edit [~ # ~] Heres Ce que j'essayais de faire:

enter image description here

csstransparency
16
Not loved

Citant de ma réponse ici :

Vérifiez ceci ((( Démo de travail et essayez d'ajouter/supprimer des contenus de #contents

Html

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

Cela fonctionnera presque dans n'importe quel navigateur qui soutient l'opacité (y compris IE9), et voici la barre de retombe IE8 "RGBA" (non testée):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

Pour générer votre propre gradient, visitez ColorCilla .

Le premier arrêt (0%) doit avoir une opacité 0 (rgba(255,255,255,0);), puis environ 70% - faire des tests pour trouver ce qui est bon pour vous - ajoutez un autre arrêt avec opacité 1 (rgba(255,255,255,1); ).

25
Giona

Si vous connaissez la hauteur, vous pouvez utiliser cette connaissance à votre avantage, vous pouvez toujours le mettre à jour de JS, mais cela me semble un peu plus simple que de définir d'innombrables gradients http://jsfiddle.net/6cxrz/4 / Vous pouvez ajuster vos paramètres pour cacher si vous aimez beaucoup

1
xception