Làm nền trắng của hình ảnh trong suốt trong css

Question

Tôi có hai hình ảnh, một trong số đó là một biểu tượng nhỏ được chồng lên trên hình ảnh đầu tiên. Biểu tượng của tôi có nền trắng, vì vậy khi biểu tượng được đặt trên hình ảnh khác, chúng tôi sẽ nhận được hiệu ứng này, nơi hình vuông màu trắng xuất hiện trên hình ảnh. Lý tưởng nhất, tôi không muốn hiển thị nền trắng này trên đầu trang của hình ảnh khác của tôi. Có thuộc tính CSS nào tôi có thể áp dụng cho biểu tượng của mình để làm nền trắng trong suốt không?

Answer 1

Cách tốt nhất là sử dụng phần mềm như photoshop hoặc Paint.Net.

Tôi muốn giới thiệu Paint.Net. Bạn nên xóa nền trắng trong Paint.Net và lưu img thành .png.

Answer 2

số Chưa ...

Nó iss nhận được rất gần càng tốt, mặc dù. Hãy xem bài viết này về Bộ lọc CSS, một tính năng css thử nghiệm, đang thực hiện một số điều mà phía máy khách đang gọn gàng.

CSS Filters

Answer 3

Trên thực tế có một cách mặc dù chỉ được hỗ trợ trên Chrome, Firefox và Safari. Nếu màu nền là màu trắng, bạn có thể thêm thuộc tính CSS:

mix-blend-mode: multiply; 

Bạn có thể đọc thêm về nó ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 4

mix-blend-mode làm việc cho một số trình duyệt, nhưng chúng tôi nhận thấy rằng nó gây ra hiệu suất vấn đề trong chrome, Tôi không biết tại sao.

Có là Hack thiên tài này, nơi bạn tạo lớp trong suốt, nhưng khi được đặt trên nền trắng, màu của nó sẽ khớp với màu của nền xung quanh.

Tôi không nhớ nơi chúng tôi tìm thấy hack, nếu ai đó biết nơi nó được xuất bản, xin vui lòng cho tôi biết trong các ý kiến ​​

Cách này "ma thuật" màu sắc được tìm thấy; là bằng cách tính toán số lượng tối đa mỗi trục màu phải là số lượng độ mờ đục được loại bỏ. Công thức cho điều này là 255 - (255 - x)/opacity. Vấn đề là: Nếu độ mờ được đặt quá thấp, công thức sẽ cho bạn số âm (không thể sử dụng được). Nếu độ mờ quá cao, bạn sẽ nhận được một số màu trên các phần không phải màu trắng của hình ảnh của bạn.
Ban đầu, chúng tôi sử dụng bảng tính để thực hiện các phép tính và thông qua thử nghiệm thủ công và lỗi, chúng tôi sẽ thấy rằng màu Goldilox.
Khi chúng tôi bắt đầu sử dụng sass, tôi nhận ra rằng điều này có thể được thực hiện với tìm kiếm nhị phân. Vì vậy, tôi tạo ra một chức năng sass mà làm công việc cho chúng tôi.

Kiểm tra this gist trên sassmeister. Chuyển màu nền của bạn vào trong hàm opacitator trên dòng 56 của mã sass. và sử dụng màu rgba được tạo trong div (hoặc phần tử giả) để phủ hình ảnh.

Answer 5

Bạn có thể tạo vùng chứa cho hình ảnh của mình. Sau đó, đối với css của vùng chứa:

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%; 

Hy vọng điều đó sẽ hữu ích. :)