Làm cách nào để thay đổi độ sáng nền trong css?

Các phần anh hùng toàn màn hình với dòng thẻ lớn và hình nền quá khổ là một trong những mẫu thiết kế phổ biến nhất trong vài năm qua (mặc dù điều đó đang thay đổi nhanh chóng, với video thay thế ảnh)

Đừng ngụy trang thông điệp của bạn

Một số thách thức có thể xảy ra khi kết hợp chụp ảnh và văn bản có thể là độ dày hoặc độ sáng của hình ảnh và ảnh hưởng của nó đối với mức độ dễ đọc. Hãy tưởng tượng một thiết kế yêu cầu văn bản tiêu đề màu trắng được đặt trên hình ảnh có độ chính xác cao. Tất nhiên, điều tương tự cũng có thể đúng với văn bản tối trên nền tối hoặc thậm chí với một hình ảnh rất bận rộn; . Đây không chỉ là những quyết định thiết kế đáng ngờ mà còn đặt ra những lo ngại về khả năng tiếp cận

Vấn đề. văn bản sáng trên nền sáng quá khó đọc. Sẽ rất tuyệt nếu có thể giảm tông màu cho hình ảnh phải không?

Bỏ qua ví dụ trực tiếp →

Ảnh nền theo cách tiêu chuẩn…

Dưới đây là một ví dụ về đánh dấu tiêu chuẩn để đặt hình nền cho một phần tử

  
This is the big message you don't want to miss!
 

Và CSS đi kèm của nó

h2 {
  font-size: 3rem;
}.hero {
  padding: 10rem 5%;
  background-image: url(somegreatimage.jpg) no-repeat;
}

Khi chúng tôi đặt hình ảnh đó làm nền của chính phần tử đó, chúng tôi không thể áp dụng bất kỳ kiểu dáng nào khác cho nó. Không thể đưa hình ảnh đó vào Photoshop (hoặc trình chỉnh sửa mà bạn chọn) và thực hiện các điều chỉnh cần thiết để giảm bớt tác động của nó đối với khả năng đọc văn bản của người dùng, chúng tôi bị mắc kẹt. Nhưng ai muốn làm điều đó?

Các yếu tố giả để giải cứu

Một cách thông minh để giải quyết vấn đề này là đặt hình ảnh trên. anh hùng. after chứ không phải trên chính phần tử đó

Mã của chúng tôi sau đó có thể trông như thế này

.hero {
  padding: 10rem 5%;
  position: relative;
}.hero:after {
  content: "";
  position: absolute;
  background-image: url(somegreatimage.jpg) no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Make sure the image sits below the content */ }

Cho đến nay, hai khối mã này hiển thị một đầu ra giống hệt nhau trong trình duyệt. Tuy nhiên, việc sử dụng phần tử giả cung cấp cho chúng tôi tùy chọn để tạo kiểu cho cả phần tử và hình ảnh độc lập với nhau. Ví dụ

.hero {
  padding: 10rem 5%;
  position: relative;
  background: rgba(0, 0, 0, 0.3); /* If our image is bright, we can tone it down with this darker overlay */
}.hero:after {
  content: "";
  position: absolute;
  background-image: url(somegreatimage.jpg) no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.5; /* Tone the image down further by giving it transparency */
}

Cứ như vậy, chúng tôi đã thêm một lớp phủ tối hơn cho hình ảnh, cho phép văn bản màu trắng của chúng tôi nổi bật so với độ sáng của hình ảnh. Nếu hình ảnh của chúng tôi bận rộn, chúng tôi cũng có thể giảm tông màu thông qua độ mờ

Đặt hình nền trên. sau phần tử giả cho phép chúng ta tạo kiểu cho phần tử và hình ảnh độc lập với nhau. Mã sạch và tính linh hoạt

Các kết hợp và biến thể có thể có ở đây rất phong phú

Xem ví dụ trực tiếp →

Nhìn chung phương pháp này có nhiều ưu điểm

1. Không cần trình chỉnh sửa hình ảnh vì chúng tôi có thể thực hiện các điều chỉnh của mình bằng mã. Không ai cần tôi giải thích tại sao đó là chén thánh
2. Điều này giúp đánh dấu của chúng ta sạch sẽ và có ngữ nghĩa mà không cần phải chèn các div được định vị đặc biệt để giữ hình ảnh để tạo kiểu
3. Chúng ta có thể áp dụng kỹ thuật này cho nhiều yếu tố mà chúng ta cần trong một dự án và chỉ cần điều chỉnh cài đặt cho từng trường hợp bằng cách sử dụng các lớp

Sáng tạo với Hiệu ứng bộ lọc CSS

Cuối cùng (và có lẽ là thú vị nhất. ), phương pháp này cũng có thể được sử dụng để tạo kiểu sáng tạo cho ảnh nền bằng Bộ lọc CSS. Tại thời điểm viết bài này, hỗ trợ khá nhiều các hiệu ứng sát thủ Photoshop này. Nếu dự án của bạn cho phép bạn bỏ qua IE, thì bầu trời là giới hạn để tạo kiểu cho hình nền của bạn giống như bạn sẽ làm nếu có nội tuyến

.hero:after {
  content: "";
  position: absolute;
  background-image: url(somegreatimage.jpg) no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webit-filter: blur(20px) grayscale(20%);
  filter: blur(20px) grayscale(20%); /* Go wild! */
}

Nếu bạn có một trường hợp lý tưởng khác để đặt hình nền trên các phần tử giả hoặc nếu bạn gặp khó khăn khi cố gắng triển khai kỹ thuật này, hãy đưa nó vào nhận xét hoặc tweet @luclemo

lọc. không có. mơ hồ(). độ sáng(). sự tương phản(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url();

Mẹo. Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng dấu cách. Lưu ý rằng thứ tự là quan trọng (i. e. sử dụng thang độ xám () sau màu nâu đỏ () sẽ dẫn đến hình ảnh hoàn toàn màu xám)