HTML/CSS - 在圖像上創建alpha蒙版

我想在我正在構建圖像蒙版蒙版的網站中創建效果。覆蓋層應該創建一個「淡出」效果 - 我實際上不需要任何動畫，但覆蓋層應該使圖像看起來好像在邊緣處漸變爲背景顏色。HTML/CSS - 在圖像上創建alpha蒙版

我喜歡用CSS/HTML/JS來做到這一點 - 不是圖像。任何想法從哪裏開始？謝謝。

2010-07-29 sa125

你可以做這樣的事情，例如：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; 

}

來源

2010-07-29 14:51:15

從jQuery開始。例如見fadeIn函數。

對於靜態的阿爾法遮掩了圖像使用不透明的CSS屬性：

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

來源

2010-07-29 11:57:52 antyrat

對不起，我一直在尋找一個靜態的淡入淡出效果，而不是過渡。請看我的例子（注意圖像如何淡入bg）。謝謝！ – sa125 2010-07-29 12:14:12

我已經更新了我的答案，現在看。 – antyrat 2010-07-29 12:39:50

這將提供簡單的不透明度，而不是透過圖像改變不透明度的alpha蒙版。 – e100 2010-07-29 12:56:27

jQuery的animate功能（不透明度）應/可以能夠處理，雖然antyrat的答案應該工作，以及如果你簡單地淡入覆蓋。

來源

2010-07-29 12:18:10 smdrager

啊 - 根據您對antyrat的回答的評論，您最好的選擇是創建一個包含效果（即半透明白色形狀）的PNG圖像，並使用CSS將其放置在實際圖像的頂部（將涉及position:absolute和z-index）。

您目前無法單獨使用HTML和CSS創建非正方形形狀。

來源

2010-07-29 12:19:21

我認爲使用不透明更容易，或者我不正確？ – antyrat 2010-07-29 12:43:26

如果淡入淡出的圖像在小孩'DIV'內，你是否真的需要使用'z-index'？ – JohnB 2010-07-29 12:47:18

是的，我想我不得不使用半透明圖像，但希望有人有一個更清潔的解決方案:)謝謝！ – sa125 2010-07-29 13:34:36

我知道你特別要求CSS/JavaScript解決方案，我相信你有你的理由。儘管如此，我只是想拋出一個單一的褪色圖像文件的簡單解決方案，就像您已經發布在您的問題中沒有花哨的編程效果。

來源

2010-07-29 12:50:34 JohnB

HTML/CSS - 在圖像上創建alpha蒙版

回答

相關問題