Giới thiệu

opacity là một thuộc tính CSS cho phép bạn thay đổi độ mờ đục của một phần tử. Theo mặc định, tất cả các phần tử có giá trị là 1 . Bằng cách thay đổi giá trị này gần với 0 , phần tử sẽ xuất hiện ngày càng minh bạch hơn.

Một trường hợp sử dụng phổ biến là sử dụng hình ảnh như một phần của nền. Điều chỉnh độ mờ có thể cải thiện tính dễ đọc của văn bản hoặc đạt được giao diện mong muốn. Tuy nhiên, không có cách nào để nhắm mục tiêu background-image của một phần tử có opacity mà không ảnh hưởng đến các phần tử con.

Trong bài viết này, bạn sẽ được trình bày hai phương pháp để khắc phục hạn chế này đối với hình nền có độ mờ.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi bài viết này, bạn sẽ cần:

Phương pháp 1 – Sử dụng Định vị và Phần tử Hình ảnh Riêng biệt

Cách tiếp cận đầu tiên sẽ dựa trên hai yếu tố. Một là “bọc” cung cấp một điểm tham chiếu với position: relative . Phần tử thứ hai là phần tử img xuất hiện phía sau nội dung với vị trí: tuyệt đối và ngữ cảnh xếp chồng.

Dưới đây là một ví dụ về đánh dấu cho phương pháp này:

  
 
 
 & lt; 
 div  
 class 
 
 
 = 
 
" 
 demo-wrap 
 "
 
 
 & gt; 
 

  
 
 
 & lt; 
 img 

    
 class 
 
 
 = 
 
" 
 demo-bg 
 "
 

    
 src 
 
 
 = 
 
" 
 https://assets.digitalocean.com/labs/images/community_bg.png
 "
 

    
 alt 
 
 
 = 
 
" 
 
 "
 

  
 & gt; 
 

  
 
 
 & lt; 
 div 
 
 class 
 
 
 = 
 
 "
 demo-content < p class = "dấu chấm câu"> "
 
 
 & gt; 
 

    
 
 
 & lt; 
 h1 
 
 & gt; < / p> 
 Xin chào Thế giới! 
 
 
 & lt; / 
 h1 
 < p class = "dấu chấm câu"> & gt; 
 

  
 
 
 & lt; / 
 div 
 
 & gt; 
 

 
 
 & lt; / 
 div 
 
 & gt; 
 

 

Và đây là các kiểu đi kèm:

  
. demo-wrap 
 
 {
  
 tràn 
 
: 
 ẩn 
; 
  
 vị trí 
 
: 
 tương đối 
; 
} 

. demo-bg 
 
 {
  
 độ mờ 
 
: 
 0,6 
; 
  
 vị trí 
 
: 
 tuyệt đối 
; 
  
 còn lại 
 
: 
 0 
; 
  
 top 
 
: 
 0 
; 
  
 width 
 
: 
 100% 
; 
  
 height 
 
: 
 auto 
; 
} 

. demo-content 
 
 {
 vị trí 
 
: 
 tương đối 
; 
} 
 

Đánh dấu và kiểu này sẽ tạo ra kết quả có văn bản ở đầu hình ảnh:

Xin chào thế giới!

demo-wrap & lt; div & gt; chính thiết lập một khối chứa định vị tuyệt đối. demo-bg & lt; img & gt; được đặt thành vị trí: tuyệt đối và được chỉ định độ mờ nhỏ. demo-content & lt; div & gt; được đặt thành position: relative và do cách sắp xếp đánh dấu, nó có ngữ cảnh xếp chồng cao hơn demo-bg . Cũng có thể sử dụng z-index để kiểm soát tốt hơn ngữ cảnh xếp chồng.

Có một số hạn chế đối với phương pháp này. Nó giả định rằng hình ảnh của bạn đủ lớn để chứa kích thước của bất kỳ phần tử nào. Bạn có thể cần thực thi các giới hạn về kích thước để ngăn hình ảnh bị cắt hoặc không bao phủ toàn bộ chiều cao của phần tử. Nó cũng sẽ yêu cầu các điều chỉnh bổ sung nếu bạn muốn kiểm soát “vị trí nền” và không có lựa chọn thay thế “lặp lại nền” rõ ràng.

Phương pháp 2 – Sử dụng CSS Pseudo-Elements

Cách tiếp cận thứ hai sẽ dựa trên các yếu tố giả. Phần tử giả : before và : after có sẵn cho hầu hết các phần tử. Thông thường, bạn sẽ cung cấp giá trị content và sử dụng nó để nối thêm văn bản vào đầu hoặc cuối. Tuy nhiên, cũng có thể cung cấp một chuỗi trống và sau đó bạn có thể sử dụng các phần tử giả cho các thiết kế.

Dưới đây là một ví dụ về đánh dấu cho phương pháp này:

  
 
 
 & lt; 
 div  
 class 
 
 
 = 
 
" 
 demo-wrap 
 "
 
 
 & gt; 
 

  
 
 
 & lt; 
 div 
 
 class 
 
 
 = 
 
 "
 demo-content < p class = "dấu chấm câu"> "
 
 
 & gt; 
 

    
 
 
 & lt; 
 h1 
 
 & gt; < / p> 
 Xin chào Thế giới! 
 
 
 & lt; / 
 h1 
 < p class = "dấu chấm câu"> & gt; 
 

  
 
 
 & lt; / 
 div 
 
 & gt; 
 

 
 
 & lt; / 
 div 
 
 & gt; 
 

 

Và đây là các kiểu đi kèm:

  
. demo-wrap 
 
 {
  
 vị trí 
 
: 
 tương đối 
; 
} 

. demo-wrap: before 
 
 {
  
 nội dung 
 
: 
 
 '' 
 
; 
  
 display 
 
: 
 khối 
; 
  
 vị trí 
 
: 
 tuyệt đối 
; 
  
 còn lại 
 
: 
 0 
; 
  
 top 
 
: 
 0 
; 
  
 width 
 
: 
 100% 
; 
  
 height 
 
: 
 100% 
; 
  
 độ mờ 
 
: 
 0,6 
; 
  
 background-image 
 
: 
 
 
 url < / p> 
 (
 
 'https://assets.digitalocean.com/labs/images/community_bg.png' 
 
) 
 
 
; 
  
 background-repeat 
 
: 
 no-repeat 
; 
  
 background-position 
 
: 
 50% 0 
;
  
 background-size 
 
: 
 cover 
; 
} 

. demo-content 
 
 {
  
 vị trí 
 
: 
 tương đối 
; 
} 
 

Đánh dấu và kiểu này sẽ tạo ra kết quả có văn bản ở đầu hình ảnh:

Xin chào thế giới!

demo-wrap & lt; div & gt; chính thiết lập một khối chứa định vị tuyệt đối. Phần tử giả : before được đặt thành position: Absolute , được gán opacity nhẹ và sử dụng background-size: cover < / code> để chiếm tất cả không gian có sẵn.

Phương pháp này có ưu điểm là hỗ trợ các thuộc tính background khác như background-position , background-repeat và background- kích thước . Phương pháp này có nhược điểm là sử dụng một trong các yếu tố giả có thể xung đột với một hiệu ứng thiết kế khác - chẳng hạn như giải pháp clearfix .

Kết luận

Trong bài viết này, bạn đã tìm hiểu về hai phương pháp để khắc phục hạn chế này đối với hình nền có độ mờ.

Nếu bạn muốn tìm hiểu thêm về CSS, hãy xem trang chủ đề CSS của chúng tôi để biết các bài tập và dự án lập trình.