HTML/CSS - tạo mặt nạ alpha trên hình ảnh

Question

Tôi muốn tạo hiệu ứng trong một trang web mà tôi đang xây dựng nơi lớp phủ được che phủ bởi một lớp phủ. Lớp phủ nên tạo hiệu ứng “mờ dần” - tôi thực sự không muốn bất kỳ hoạt ảnh nào, nhưng lớp phủ sẽ làm cho hình ảnh trông như thể nó đang mờ dần đến màu nền ở các cạnh.

Something như thế này: http://imgur.com/fqtc9.png

tôi thích làm điều này với CSS/HTML/JS - không phải hình ảnh. Bất kỳ suy nghĩ về nơi để bắt đầu? Cảm ơn.

Answer 1

bạn có thể làm một cái gì đó như thế này ví dụ: 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

Bắt đầu với jQuery. Ví dụ, xem hàm fadeIn.

Đối với mặt nạ tĩnh alpha qua hình ảnh tài sản sử dụng opacity css:

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

Answer 3

Các jQuery animate chức năng (với opacity) nên/có thể xử lý đó, mặc dù câu trả lời antyrat của nên làm việc cũng như nếu bạn chỉ đơn giản là fadeIn lớp phủ.

Answer 4

Ah - dựa trên nhận xét của bạn về câu trả lời của kẻ phản đối, cách tốt nhất là tạo hình ảnh PNG có chứa hiệu ứng (tức là hình bán trắng trong suốt) và định vị nó trên đầu hình ảnh thực tế của bạn bằng CSS position:absolute và z-index sẽ được tham gia).

Hiện tại, bạn không thể tạo hình dạng không vuông bằng cách sử dụng HTML và CSS.

Answer 5

Tôi biết rằng bạn đang yêu cầu cụ thể về giải pháp CSS/JavaScript và tôi chắc chắn rằng bạn có lý do của mình.

Tuy nhiên, tôi chỉ muốn đưa ra giải pháp đơn giản của một tệp hình ảnh mờ nhạt duy nhất như bạn đã đăng trong câu hỏi của mình mà không có hiệu ứng được lập trình lạ mắt nào.