Open
 Chủ đề đang mở, có thể trả lời
Avatar of Hoàng
Hoàng 2 years trước

Có pro nào rành css chỉ em cách chuyển hình màu thành hình trắng đen bằng Css với. Em cần dùng css để chuyển hình màu thành trắng đen rồi sau đó khi rê chuộc vào thì nó đổi thành hình màu bình thường. Đang cần để làm cái slide hình cho web. Thank các bác nhiều!

Câu hỏi này có hữu ích với bạn? (0 đánh giá)
Avatar of Jerry
Jerry 2 years trước

Bạn dùng thẻ div bọc cái hình rồi css cho nó:

<div class="img-wr"><img id="myImage" src="yourimage.jpg" /></div>

css:

.img-wr{
    background-color: #000;
}
.img-wr img{
    opacity : 0.4;
    filter: alpha(opacity=40); /* IE*/
}

bạn thử cách này xem sao :D

Câu trả lời này có hữu ích với bạn? (0 đánh giá)
Avatar of Kiếp đào hoa
Kiếp đào hoa 2 years trước
Câu trả lời tốt nhất

Bạn dùng css này đi, nó hoạt động tốt trên hầu như mọi trình duyệt

 <a href="#"><img src="img.jpg" /></a>

Css đổi màu:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Trạng thái không đổi màu:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1;
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

Done! :)

Câu trả lời này có hữu ích với bạn? (0 đánh giá)
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.