HTML/CSS - Alphamaske über Bild erstellen

Question

Ich möchte einen Effekt in einer Site erstellen, die ich gerade baue, wo ein Bild durch ein Overlay maskiert wird. Das Overlay sollte einen "Fade-Out" -Effekt erzeugen - eigentlich möchte ich nichts animiert haben, aber das Overlay sollte das Bild so aussehen lassen, als ob es an den Rändern in die Hintergrundfarbe übergeht.

Etwas wie folgt aus: http://imgur.com/fqtc9.png

Ich ziehe es, dies zu tun mit CSS/HTML/JS - nicht Bilder. Irgendwelche Gedanken darüber, wo ich anfangen soll? Vielen Dank.

Answer 1

Sie so etwas wie dies zum Beispiel tun könnte: Example

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; 

} 

Answer 2

Beginnen Sie mit jQuery. Zum Beispiel siehe fadeIn Funktion.

Für statische Alpha-Maske über den Einsatz Opazität CSS-Eigenschaft Bild:

.myimage { 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

Answer 3

Die jQuery animate Funktion (mit Opazität) sollte/kann in der Lage sein, das zu handhaben, wenn die Antwort von antyrat sollte auch funktionieren, wenn Sie fadein die Überlagerung.

Answer 4

Ah - basierend auf Ihrem Kommentar zur Antwort von antyrat ist es das Beste, ein PNG-Bild zu erstellen, das den Effekt enthält (dh eine halbtransparente weiße Form) und es über das obere Bild mit CSS zu positionieren (position:absolute und z-index werden beteiligt sein).

Sie können derzeit keine nicht quadratischen Formen mit HTML und CSS allein erstellen.

Answer 5

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

Nichtsdestotrotz wollte ich einfach die einfache Lösung einer einzelnen verblassten Bilddatei, wie Sie sie bereits in Ihrer Frage geschrieben haben, ohne irgendwelche programmierten Effekte auswerfen.