Khi xây dựng một trang web, bạn có thể thường muốn đặt một hình nền trên một HTML

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

6 cũng chứa văn bản hoặc nội dung khác

Và để làm cho văn bản nổi bật, bạn muốn thay đổi độ mờ của hình nền đó trong CSS để nó trở nên bán trong suốt. Nhưng bạn đã thử và bạn không thể thay đổi độ mờ của hình nền mà không ảnh hưởng đến văn bản hoặc các thành phần con khác

Bạn có thể làm gì?

Vì vậy, đầu tiên, tin xấu…

Không có thuộc tính CSS nào mà bạn có thể sử dụng để thay đổi độ mờ của chỉ hình nền

Không giống như màu nền, cho phép bạn điều chỉnh kênh alpha để kiểm soát độ mờ, đơn giản là nó không tồn tại đối với thuộc tính 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

7. Có thể một ngày nào đó?

Trong thời gian chờ đợi, chúng ta hãy xem lý do tại sao việc thay đổi độ mờ sẽ ảnh hưởng đến văn bản hoặc nội dung khác trong thành phần đó. Sau đó, chúng tôi sẽ xem xét các giải pháp thay thế mà bạn có thể sử dụng

Các thay đổi về độ mờ trên phần tử cha sẽ được kế thừa cho các phần tử con

Ví dụ: giả sử bạn có một phần tử div với một số văn bản bên trong và bạn đã đặt 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

7 trên phần tử cha 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

9 

    
Cute kittehs everywhere!

Sau đó, bạn điều chỉnh độ mờ của phần gốc để cố gắng làm cho hình nền bán trong suốt, như thế này

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Độ mờ đục được tự động kế thừa bởi các phần tử con, vì vậy khi bạn điều chỉnh độ mờ của phần tử cha, nó sẽ ảnh hưởng đến tất cả các phần tử con trong lớp cha đó. (Điều này tương tự như cách z-index cũng được kế thừa. )

Vì vậy, bạn sẽ kết thúc với tất cả các yếu tố, cả hình nền và văn bản, có độ mờ giảm đi

Chắc chắn không phải những gì chúng ta muốn thấy

Dung dịch. Đặt hình nền thành phần tử giả của phần tử gốc

Để khắc phục vấn đề này, chúng ta cần đặt hình nền vào phần tử con của phần tử cha. Điều này sẽ đảm bảo rằng hình nền và nội dung văn bản sẽ nằm trên “lớp” riêng của chúng trong phần gốc. Sau đó, bạn có thể kiểm soát độ mờ của từng lớp mà không ảnh hưởng lẫn nhau

Một phương pháp bạn có thể sử dụng là đặt các kiểu 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

7 trong phần tử giả của phần tử gốc

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

Vì phần tử giả là một loại phần tử con của phần tử gốc nên bạn có thể thay đổi độ mờ của phần tử đó mà không ảnh hưởng đến nội dung văn bản

Để làm cho phần tử giả đó có cùng kích thước với phần tử gốc, bạn sẽ phải định vị phần tử đó một cách tuyệt đối và đặt các giá trị trên cùng, bên phải, dưới cùng và bên trái của nó thành 0 để phần tử đó không bị thu gọn. Ngoài ra, với tư cách là một phần tử giả, phần tử này cần phải đặt thuộc tính 

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

1, nếu không phần tử đó sẽ không hiển thị trên trang

(Bạn cũng có thể đặt hình nền vào phần tử con của chính nó, nhưng sử dụng phần tử giả giúp giữ cho HTML được đơn giản hóa. )

Sau đó, đối với văn bản mà chúng ta có trong thẻ 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

0 , bạn sẽ cần đặt nó thành 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

1 để nó nằm trên phần tử giả và hình nền. Nếu bạn không đặt rõ ràng thuộc tính 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

2, thuộc tính này sẽ bị ẩn bên dưới phần tử giả được định vị tuyệt đối trong ngăn xếp lớp chỉ mục z

Cuối cùng, đừng quên đặt cấp độ gốc thành 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

1 để giữ cho trẻ em trong giới hạn

Bây giờ, văn bản sẽ vẫn ở độ mờ mặc định là 1 và cài đặt độ mờ đã giảm sẽ bị giới hạn ở hình nền trong phần tử giả

Tôi có mã cho ví dụ trên trong Codepen— cứ thoải mái chơi với nó

Giải pháp thay thế. thêm một lớp phủ với độ mờ và màu nền đã giảm ở trên cùng của hình nền

Một giải pháp khác là thay vì thay đổi độ mờ của ảnh nền, bạn thêm một lớp phủ có màu nền bán trong suốt lên trên ảnh nền

Đánh dấu HTML sẽ giống như giải pháp trước đó. Trong CSS, bạn có thể đặt hình nền trực tiếp trong phần tử gốc mà không thay đổi độ mờ

Phần tử giả của cha mẹ sau đó sẽ chứa màu nền bán trong suốt

Điều này được thực hiện bằng cách đặt thuộc tính 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

4 bằng cách sử dụng cú pháp 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

5, trong đó ba ký tự đầu tiên là số màu RGB và số cuối cùng là cài đặt alpha hoặc độ trong suốt. Chúng tôi đang sử dụng 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

6 cho màu RGB, có nghĩa là màu đen

Giá trị alpha có thể nằm trong khoảng từ 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

7 (độ mờ 0%) đến 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

8 (độ mờ 100%). Vì vậy, giá trị của chúng ta là 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

9 sẽ dẫn đến lớp phủ có độ mờ 25%

Đây là những gì sẽ trông như thế nào trong mã

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

3

Kết quả sẽ như thế này

Và đây là Codepen cho giải pháp lớp phủ này

Cả hai giải pháp đều có kết quả trông rất giống nhau. Giải pháp đầu tiên có hình nền được đặt ở độ mờ 75%. Và giải pháp thứ hai thêm lớp phủ màu đen ở độ mờ 25%. Vì vậy, chúng không hoàn toàn giống nhau, nhưng chúng giống nhau

Giải pháp lớp phủ cũng rất hữu ích nếu bạn muốn thêm tông màu cho ảnh nền. Đây là giao diện sẽ như thế nào nếu chúng ta đặt lớp phủ 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

4 thành 

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

1