HTML - /CSS - erstellen von alpha-Maske über das Bild

Ich würde gerne einen Effekt zu erstellen, die in eine Website, die ich Baue, wo ein Bild maskiert durch ein overlay. Das overlay sollte ein "fade-out" — Effekt- ich weiß nicht wirklich wollen, etwas animiert, aber das overlay sollte das Bild so Aussehen, als ob es verblassen, die Farbe des Hintergrunds an den Kanten.

Etwas wie dieses: http://imgur.com/fqtc9.png

Bevorzuge ich dies mit CSS/HTML/JS - keine Bilder. Irgendwelche Gedanken darüber, wo Sie anfangen sollen? Danke.

InformationsquelleAutor sa125 | 2010-07-29

  1. 4

    könnten Sie etwas tun, wie dieses zum Beispiel : Beispiel

    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; 

}

    InformationsquelleAutor Nate Nolting

  2. 2

    Ah — basierend auf Ihren Kommentar auf antyrat Antwort, Ihre beste Wette ist, erstellen Sie ein PNG-Bild mit dem Effekt (D. H. eine semi-transparente weiße Form), und positionieren Sie es über dem oberen Rand des tatsächlichen Bildes mit CSS (position:absolute und z-index beteiligt sein werden).

    Kann man derzeit nicht erstellen, die nicht-quadratische Formen mit HTML und CSS allein.

    Ich finde die Deckkraft ist leichter, oder bin ich falsch?
    Wenn die fade-Bild ist im inneren ein Kind DIV tun Sie Sie wirklich Notwendigkeit zu verwenden z-index?
    ja, ich dachte, ich würde verwenden ein semi-transparentes Bild, aber gehofft, jemand hat eine saubere Lösung 🙂 vielen Dank!
    Könnten Sie "Deckkraft", um erstellen Sie eine semi-transparente weiße Fläche, aber das Gebiet würde Platz, mit scharfen Kanten: kein fading an den Rand. WebKit unterstützt CSS-Farbverläufe einschließlich radiale Farbverläufe (auch als rgba-Farben), so kann je nach Effekt, den Sie möchten, könnten Sie in der Lage sein, es zu tun mit reinem CSS-Code in WebKit. Aber nicht bei den anderen Browsern aktuell unterstützt.
    wahrscheinlich nicht, wenn Sie haben eine div (mit position: relative) mit dem Bild image und das fade image.

    InformationsquelleAutor Paul D. Waite

  3. 2

    Ich weiß, dass Sie Fragen, die speziell für einen CSS - /JavaScript-Lösung, und ich bin sicher, Sie haben Ihre Gründe.

    Trotzdem, ich wollte einfach nur werfen die einfache Lösung von einem einzigen verblassten image-Datei, wie Sie bereits geschrieben in deiner Frage mit keine Lust auf programmierte Effekte.

    InformationsquelleAutor JohnB

  4. 1

    Start mit jQuery. Siehe zum Beispiel fadeIn Funktion.

    Für statische alpha-Maske über das Bild verwenden Deckkraft css-Eigenschaft:

    .myimage {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
    sorry, ich war auf der Suche für eine statische fade-Effekt, nicht übergang. Sehen Sie bitte mein Beispiel (beachten Sie, wie das Bild verblasst in der bg). danke!
    Ich aktualisiert meine Antwort, jetzt Aussehen.
    Dies gibt einfach die Deckkraft und nicht eine alpha-Maske variiert die Deckkraft über das Bild.

    InformationsquelleAutor antyrat

  5. 0

    Den jQuery animate - Funktion (mit opacity) sollte/kann in der Lage sein zu handhaben, dass, obwohl antyrat Antwort sollte auch funktionieren, wenn Sie einfach fadein overlay.

    InformationsquelleAutor smdrager

Schreibe einen Kommentar