Hướng dẫn css filter color overlay - lớp phủ màu bộ lọc css

Question

Image Hover Overlay có thể hiểu sang tiếng việt là hình ảnh được che phủ khi hover, đúng với các tên của nó, Image Hover Overlay là các hình ảnh mà khi hover chuột lên nó, hình ảnh sẽ được che phủ bởi một đoạn text, một button hay một liên kết nào đó.

Nội dung chính Show

1. Xây dựng giao diện
2. Thêm CSS cho giao diện
3. Lời kết
Ví dụ về những gì tôi đang cố gắng đạt được

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một số Image Hover Overlay với các hiệu ứng khác nhau.

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:

Code

<div class="main">
  <h2>Freetuts.net hướng dẫn tạo Image Hover Overlay</h2>
  <p>Hover lên ảnh để xem hiệu ứng</p>
  <div class="container">
    <img src="./images/demo.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Freetuts.net</div>
    </div>
  </div>
</div>

Trong ứng dụng này chúng ta sẽ có hai thành phần chính đó là phần hình ảnh và phần thẻ div, cái sẽ được hiện hiện đè lên hình ảnh khi hình ảnh được hover.

Bài viết này được đăng tại [free tuts .net]

OK giờ chuyển qua bước tiếp theo.

2. Thêm CSS cho giao diện

Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style:

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Đầu tiên, mình sẽ đặt thuộc tính opacity: 0; cho phần thẻ div, thuộc tính này sẽ khiến nó trở nên trong suốt và do đó hình ảnh sẽ được hiển thị.

Tiếp đến khi hình ảnh được hover, mình đặt lại opacity: 1; cho phần thẻ div này và nó sẽ được hiển thị đè lên phàn hình ảnh.

Chúng ta cũng có thể sử dụng đoạn mã CSS sau để thay thế cho đoạn CSS trên nếu bạn muốn một hiệu ứng khác khi hover vào hình ảnh:

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #888888;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Khác với ở trên, lần này mình không sử dụng thuộc tính opacity nữa mà mình sẽ lợi dụng thuộc tính height và transition:

Mặc định, mình sẽ đặt height của phần thẻ div là 0 để ẩn nó đi.
Khi hình ảnh được hover, mình đặt lại height = 100% cho nó, do đã được thiết lập thuộc tính transition nên phần thẻ div sẽ có hiệu ứng chuyển động.

Dựa vào các thuộc tính của CSS, các bạn có thể tùy biến rất nhiều hiệu ứng, ở đây mình không thể trình bày hết được, giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé!

3. Lời kết

Như vậy, qua bài viết này mình đã cùng các bạn tạo một Image Hover Overlay với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

Tôi có một biểu tượng mà tôi muốn thay đổi màu sắc của CSS. Nó nằm trong một SVG được tối ưu hóa dữ liệu được ghi trong CSS.

Thông thường, điều này là không thể. Đó là lý do tại sao phông chữ biểu tượng được phát minh ra; Ưu điểm chính của họ so với SVG là có thể nhận được các quy tắc color và

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

0 từ CSS. Chà, các bộ lọc CSS hiện có khả năng thực hiện cả hai thứ để hình ảnh tùy ý và giờ đây chúng hoạt động trong tất cả các trình duyệt Blink, Webkit và Gecko và có thể được mong đợi cho IE/Spartan trong tương lai.

Thay thế

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

0 là dễ dàng; Chỉ cần sử dụng bộ lọc

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

2.

Tuy nhiên, tô màu hình ảnh thành một màu cụ thể đã được chứng minh rất khó khăn, mặc dù tất cả các bộ lọc cần thiết ở đây. Lý thuyết của tôi, cho đến bây giờ, như sau:

Sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

3 để biến toàn bộ hình ảnh thành màu xám rắn, trong khi giữ kênh alpha (mozilla wiki nói rằng nó sẽ trở thành màu đen, nhưng trong tất cả các trình duyệt, nó trở nên màu xám, phải là một lỗi đánh máy).

Sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

4, vì chúng ta không thể hoạt động trên Hue/Saturation trên hình ảnh màu xám. Điều này đảm bảo toàn bộ hình ảnh bao gồm một màu tham chiếu mà chúng ta có thể làm toán trên; Cụ thể,

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

5.

Tại thời điểm này, chúng ta sẽ có thể biến toàn bộ hình ảnh từ những gì hiện nay là

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

5 thành bất kỳ màu nào chúng ta muốn sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

7,

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

8 và

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

9.

Đầu tiên, trình duyệt tọa độ màu nào đang sử dụng? Tôi không thể tìm thấy ý nghĩa của thông số kỹ thuật để chắc chắn rằng nó sử dụng HSL (độ sáng) hoặc HSV (giá trị), nhưng vì HSB (độ sáng) là một tên khác cho HSV, tôi cho rằng nó sử dụng HSV. Hơn nữa, sử dụng một cái gì đó như

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #888888;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

0 bão hòa màu (thay vì làm cho chúng màu trắng), điều này sẽ xảy ra trong HSV nhưng không phải HSL.

Dựa trên giả định này, chúng tôi sẽ tiến hành như sau:

Tính chênh lệch màu sắc giữa

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

5 và màu chúng tôi muốn và sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

7.

Tính chênh lệch bão hòa giữa cả hai và sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

8.

Tính chênh lệch độ sáng giữa cả hai và sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

9.

Vì đây không phải là loại công cụ được thực hiện bằng tay, chúng tôi sẽ sử dụng trình tiền xử lý ít hơn:

.colorize(@color) {
    @sepiaGrey: #AC9977;
    @hOffset: (hsvhue(@color) - hsvhue(@sepiaGrey)) * 1deg;
    @sRatio: unit(hsvsaturation(@color) / hsvsaturation(@sepiaGrey));
    @vRatio: unit(hsvvalue(@color) / hsvvalue(@sepiaGrey));
    -webkit-filter: contrast(0) sepia(1) hue-rotate(@hOffset) saturate(@sRatio) brightness(@vRatio);
    filter: contrast(0) sepia(1) hue-rotate(@hOffset) saturate(@sRatio) brightness(@vRatio);
}

Điều này, theo hiểu biết của tôi, nên làm việc. Nhưng nó không phải là. Tại sao và làm thế nào để làm cho nó hoạt động?

Ví dụ về những gì tôi đang cố gắng đạt được

Hãy xem xét một biểu tượng là một hình ảnh hoặc một phần tử (hình ảnh nền, hình dạng dựa trên CSS, v.v.), với bất kỳ màu nào và với hình dạng được xác định bởi độ trong suốt (không phải là hình ảnh hình chữ nhật có thể được phủ lên). Tôi muốn làm cho nó hoàn toàn bao gồm một màu cụ thể với CSS (có lẽ, với việc sử dụng

.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #888888;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

5).

Tôi dự định thực hiện điều này dưới dạng ít mixin có một đối số màu, nhưng chỉ hướng dẫn về logic đằng sau các hàm HSB là đủ.