Chuyển hình màu thành trắng đen bằng css như thế nào?

Home Forums Hỏi đáp Chuyển hình màu thành trắng đen bằng css như thế nào?

This topic contains 2 replies, has 3 voices, and was last updated by Ảnh hồ sơ của Kiếp đào hoa Kiếp đào hoa 3 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6988
    Ảnh hồ sơ của Hoàng
    Hoàng
    Member

    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!

    #7519
    Ảnh hồ sơ của Jerry
    Jerry
    Member

    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

    #7520

    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! :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.