HTML/CSS - créer un masque alpha de l'image

J'aimerais créer un effet dans un site que je suis en train de construire où une image est masquée par une superposition. L'extension doit créer un “fade out” effet — je ne veux rien d'animation, mais la superposition doit rendre l'image comme si c'est la décoloration de la couleur d'arrière-plan sur les bords.

Quelque chose comme ceci: http://imgur.com/fqtc9.png

Je préfère le faire avec du CSS/HTML/JS - pas d'images. Des idées sur où commencer? Merci.

OriginalL'auteur sa125 | 2010-07-29

  1. 4

    vous pourriez faire quelque chose comme ceci par exemple : Exemple

    html

    <div class="photo_container">
        <div class="photo">
<img src="/lakenwoods/images/mockup-photo.png" width="540" height="463" /></div>
        <div class="overlay">
            <div class="content">
                <h1>Welcome to Lake-N-Woods Realty</h1>
                <p>
                We are a Diverse and Highly Effective Real Estate Company, Dedicated to Satisfying all of our Clients Needs. We Specialize in Recreational, Rural and Investment Property throughout Bemidji and North Central Minnesota.
                </p>
                </div>
        </div>
        <div class="clear">
       </div>
   </div>

    CSS

    @charset "utf-8";
/* CSS Document */

.clear {
    clear:both;     
}

.photo_container {
    position: relative;
    width: 540px;
    height: 463px;
    overflow:hidden;
    margin: 0; padding:0;
}

.photo_container .photo {
    z-index:1;

}


.photo_container .overlay {
    width: 540px;
    height: 463px;
    background: url(/lakenwoods/images/mockup-overlay.png) no-repeat top center;
    position:absolute;
    bottom: 0;
    left: 0;
    z-index:10;

}

.photo_container .overlay .content h1 {

    position:absolute;
    top: 310px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:18px;
    color: #fff;
    font-weight: 700;
    width: 315px;

}


.photo_container .overlay .content p {


    position:absolute;
    top: 335px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:12px;
    color: #fff;
    width: 315px;
    line-height: 1.4em; 

}

    OriginalL'auteur Nate Nolting

  2. 2

    Ah — en fonction de votre commentaire sur antyrat réponse, votre meilleur pari est de créer une image PNG qui contient l'effet (c'est à dire semi-transparent blanc de forme), et le positionner sur le haut de votre image à l'aide de CSS (position:absolute et z-index seront impliqués).

    Vous ne pouvez pas actuellement de créer des formes carrées à l'aide de HTML et CSS seul.

    Je pense que l'utilisation d'opacité est plus facile, ou je suis incorrect?
    Si le fondu de l'image est à l'intérieur d'un enfant DIV, avez-vous vraiment besoin d'utiliser z-index?
    ouais, j'ai pensé à utiliser une image semi-transparente, mais il espérait que quelqu'un a une solution plus propre 🙂 merci!
    Vous pouvez utiliser l'opacité pour créer une semi-transparent blanc de la zone, mais ce domaine est carré, avec des bords tranchants: pas de décoloration du bord. WebKit prend en charge des gradients CSS y compris les dégradés radiaux (ainsi que des couleurs rgba), donc, en fonction de l'effet que vous voulez, vous pourriez être en mesure de le faire avec de la pure CSS dans WebKit. Mais pas les autres navigateurs actuellement prise en charge.
    probablement pas, si vous avez un div (avec position: relative) contenant l'image et le fondu de l'image.

    OriginalL'auteur Paul D. Waite

  3. 2

    Je sais que vous vous demandez spécifiquement pour un CSS/JavaScript solution, et je suis sûr que vous avez vos raisons.

    Néanmoins, je voulais juste jeter la solution la plus simple d'une unique délavé fichier image comme vous avez déjà posté votre question avec pas de fantaisie, programmé effets.

    OriginalL'auteur JohnB

  4. 1

    Commencer avec jQuery. Voir, par exemple, fadeIn fonction.

    Statique alpha masque sur une image, utilisez l'opacité d'une propriété css:

    .myimage {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
    désolé, j'ai été à la recherche pour une charge statique effet de fondu, pas de transition. Veuillez voir mon exemple (notez la manière dont l'image s'estompe en bg). merci!
    J'ai mis à jour ma réponse, regardez maintenant.
    Cela donnera simple opacité et pas un masque alpha qui varie en fonction de l'opacité à travers l'image.

    OriginalL'auteur antyrat

  5. 0

    Le jQuery animate fonction (avec une opacité) doit/peut être capable de gérer cela, mais antyrat la réponse devrait fonctionner aussi bien tout simplement si vous fadein la superposition.

    OriginalL'auteur smdrager