Cách thay đổi độ mờ của ảnh nền CSS
Với CSS và CSS3 bạn có thể làm rất nhiều thứ, nhưng đặt độ mờ trên nền CSS không phải là một trong số đó. Tuy nhiên, nếu bạn thích sáng tạo, có rất nhiều cách giải quyết sáng tạo giúp bạn có thể làm cho nó có vẻ như bạn đang thay đổi độ mờ của hình nền CSS. Cả hai phương pháp sau đều hỗ trợ trình duyệt tuyệt vời cho đến Internet Explorer 8.
Phương pháp 1: Sử dụng định vị tuyệt đối và một hình ảnh
Phương pháp này chính xác như nó âm thanh. Bạn chỉ cần sử dụng định vị tuyệt đối trên thẻ img thông thường và làm cho nó có vẻ như bạn đã sử dụng thuộc tính background-image CSS. Tất cả những gì bạn phải làm là đặt hình ảnh vào bên trong của một position: relative; thùng đựng hàng. Đây là những gì đánh dấu HTML thường trông giống như:
<div class="demo_wrap"> <h1>Hello World!</h1> <img src="/image_static/mg_sid_64/794d/4d41/794d4d414c4d4e/794d4d414c4d4e.png"> </div> Và Đây là kết quả CSS của bạn sẽ trông như thế nào:
.demo_wrap { position: relative; overflow: hidden; padding: 16px; border: 1px dashed green; } .demo_wrap h1 { padding: 100px; position: relative; z-index: 2; } .demo_wrap img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0.6; } Mẹo ở đây là đặt img đúng vị trí và kéo giãn nó để nó lấp đầy toàn bộ containers mẹ. Và định vị tương đối mọi thứ khác để bạn có thể đặt z-index kéo nó lên trên img.
Đây là bản demo trực tiếp:
Chào thế giới!
Phương pháp 2: Sử dụng CSS Pseudo-Elements
Phương pháp này có vẻ đơn giản khi bạn nhìn thấy nó, và chắc chắn là phương pháp ưa thích của tôi để làm điều này. Sử dụng các phần tử giả CSS của một trong hai :before hoặc :after , bạn tạo một div với hình nền và đặt độ mờ trên đó. Đây là những gì đánh dấu HTML của bạn gần giống như sau:
<div class="demo_wrap"> <h1>Hello World!</h1> </div> Và đây là CSS trông như thế nào:
.demo_wrap { position: relative; background: #5C97FF; overflow: hidden; } .demo_wrap h1 { padding: 50px; position: relative; z-index: 2; } /* You could use :after - it doesn't really matter */ .demo_wrap:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; background-image: url('/image_static/mg_sid_64/794d/4d41/794d4d414c4d4e/794d4d414c4d4e.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } Ở đây , ta phải di chuyển z-index của nội dung (trong cas này là <h1> ) lên trên phần tử giả nền và ta phải xác định rõ ràng position: absolute; và z-index: 1 trên :before pseudoelement.
Phần còn lại của các thuộc tính trên phần tử giả tồn tại để định vị nó chồng lên 100% phần tử root và cũng sử dụng thuộc tính CSS mới thông minh: background-size: cover có kích thước nền để bao phủ phần tử mà không thay đổi tỷ lệ.
Đây là một bản demo nhỏ về phương pháp này:
Chào thế giới!
Các tin liên quan
Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display2020-09-16
Cách tạo ảnh động với Animate.css
2020-09-16
6 tiện ích mở rộng CSS tuyệt vời cho VS Code
2020-09-15
Màu mã hex CSS với giá trị alpha
2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
