Lớp phủ hình ảnh CSS có màu sắc và độ trong suốt

Question

Tôi đang cố gắng tìm hiểu xem tôi có thể thêm lớp phủ vào hình ảnh như màu và thay đổi độ mờ mà không thêm màu nền hay không. Tôi không có may mắn nên tôi nghĩ tôi sẽ hỏi ở đây.
Tôi muốn làm cho màu đỏ với độ mờ đó. đây là những gì tôi có cho đến nay.

Tôi đã tạo một hình ảnh để che phủ nó nếu tôi phải gọi là overlay.png nhưng không biết liệu nó có cần thiết không.

Về cơ bản, tôi muốn làm điều này nhưng ngược lại, cho hình ảnh có màu khi không di chuyển sang màu khi di chuột.
check it out đây
http://jsbin.com/igahay/3011/edit

Answer 1

Nếu bạn có thể sử dụng CSS3, hãy thử với CSS:filter ans đặc biệt -webkit-filter
^{(Nó không phải là một giải pháp hoàn toàn qua trình duyệt ... chưa!)}

<img src="image.jpg" /> 
<style> 
    img:hover { 
     -webkit-filter: hue-rotate(240deg) saturate(3.3); 
    } 
</style> 

Ở đây bạn có một vài bản trình diễn trực tuyến:

• CSS Filter Effects
• Say Hello to Webkit Filters
• More on google...

Hy vọng nó giúp .. hoặc ít nhất là điểm bạn đi đúng hướng.

Answer 2

Nếu bạn muốn chắc ngược lại những gì bạn thấy cân nhắc làm điều này:

.tint:hover:before { 
    background: rgba(0,0,250, 0.5); 

    } 

    .t2:before { 
    background: none; 
    } 

và nhìn vào ảnh hưởng đến hình ảnh thứ 2.

Nó có phải trông giống như this không?

Answer 3

Bạn đã thử dùng Bộ lọc Webkit chưa?

Bạn có thể thao tác không chỉ làm mờ, nhưng màu sắc, độ sáng, độ sáng và các tài sản khác:

CSS Tuỳ chỉnh bộ lọc Blend Modes Ví dụ: http://codepen.io/adobe/pen/nygsD

Answer 4

một cái gì đó như thế này? http://codepen.io/Nunotmp/pen/wKjvB

Bạn có thể thêm trống div và sử dụng vị trí tuyệt đối.

Answer 5

JSFiddle Demo

HTML:

<div class="image-holder"> 
    <img src="http://codemancers.com/img/who-we-are-bg.png" /> 
</div> 

CSS:

.image-holder { 
    display:inline-block; 
    position: relative; 
} 
.image-holder:after { 
    content:''; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    background: blue; 
    opacity: 0.1; 
} 
.image-holder:hover:after { 
    opacity: 0; 
}