Khi thiết kế website, bạn quyết định muốn phần tử trang web xuất hiện trong suốt hơn các phần tử khác. Ví dụ, thiết kế trang với nhiều hình ảnh muốn hơi trong suốt.
Đó là lúc thuộc tính CSS opacity xuất hiện. Thuộc tính CSS opacity dùng chỉ định độ trong suốt phần tử web.
Hướng dẫn thảo luận, tham chiếu ví dụ, cách dùng thuộc tính opacity làm phần tử trong suốt trang web. Cuối hướng dẫn, bạn chuyên gia làm việc opacity CSS.
Thuộc tính CSS Opacity
Thuộc tính CSS opacity làm phần tử nhìn xuyên qua, hoặc trong suốt.
Giá trị opacity từ 0 đến 1. Giá trị càng thấp, phần tử càng trong suốt. Vậy giá trị 0 làm phần tử hoàn toàn mờ/hoàn toàn trong suốt, giá trị 1 làm phần tử xuất hiện bình thường.
Cú pháp CSS opacity:
img { opacity: 0.5; }
Ví dụ trên đặt opacity bất kỳ img nào bằng 0.5. Nghĩa là tất cả hình ảnh xuất hiện 50% trong suốt hơn mặc định.
Thuộc tính opacity áp dụng cho cả phần tử cha và phần tử con bên trong. Nghĩa là nếu áp dụng opacity cho hộp chứa văn bản, cả hộp và văn bản đều mờ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Bây giờ đã thảo luận cú pháp opacity, đi qua vài ví dụ thuộc tính này hoạt động.
Tạo Hình ảnh Trong suốt
Giả sử thiết kế website muốn hình ảnh xuất hiện trong suốt. Có thể đạt mục tiêu dùng thuộc tính CSS opacity.
Ví dụ opacity đặt hình ảnh opacity 0.7 (làm hình ảnh 70% mờ):
img { opacity: 0.7; }
Mã trả về:
Bên trái, hình ảnh không đặt opacity. Nghĩa là hình ảnh không trong suốt. Bên phải, hình ảnh đặt opacity 0.7. Kết quả, hình ảnh bên phải trong suốt hơn bên trái.
Kích hoạt Opacity khi Hover
Khi làm việc opacity, bạn quyết định muốn hình ảnh xuất hiện mờ hơn hoặc ít mờ khi người dùng di chuột qua.
Bộ chọn CSS :hover dùng kết hợp thuộc tính opacity thay đổi độ trong suốt khi người dùng di chuột qua hình ảnh.
Giả sử muốn hình ảnh 50% trong suốt (opacity 0.5) mặc định. Cũng muốn đặt opacity 1 khi di chuột qua. Làm với mã:
.img { opacity: 0.5; }
.img:hover { opacity: 1; }
Kết quả mã:
Bên trái, ví dụ hình ảnh khi người dùng di chuột qua. Bên phải, hình ảnh khi không di chuột qua.
Mặc định, hình ảnh 50% trong suốt, nhưng khi di chuột qua, opacity đặt 1 và hình ảnh hiển thị đầy đủ.
Hộp Trong suốt (Transparent Boxes)
Phần tử opacity cũng dùng làm hộp trong suốt CSS.
Khi dùng opacity làm phần tử trong suốt, mọi phần tử bên trong cũng chia sẻ opacity chỉ định.
Giả sử có hai <div>, tạo hộp trang web. Muốn một <div> xuất hiện bình thường, cái kia 50% trong suốt. Dùng mã:
.div1 { background-color: #B5651D; opacity: 0.5; text-align: center; padding: 20px; color: black; }
Mã trả về:
Trong ví dụ, tạo hai hộp. Hộp trên cùng kiểu hộp dưới, nhưng không opacity. Hộp dưới opacity 0.5, xuất hiện 50% trong suốt.
Như thấy, văn bản hộp dưới cũng mờ hơn. Vì tất cả phần tử bên trong <div> kế thừa giá trị trong suốt chỉ định.
Độ trong suốt Màu RGBA
Trong ví dụ trước, dùng opacity làm phần tử mờ/ít mờ. Tuy nhiên, cách khác làm phần tử trong suốt: đặt màu nền phần tử dùng giá trị màu RGBA.
Khi làm màu, thường dùng RGB chỉ định màu. Ngoài RGB, cũng chỉ định giá trị alpha (RGBA), đặt độ mờ màu chỉ định.
Cách này hữu ích vì cho phép đặt opacity cho màu nền phần tử, không áp dụng cho phần tử bên trong phần tử làm trong suốt. Khác opacity, áp dụng cho tất cả phần tử bên trong nơi opacity chỉ định.
Lấy ví dụ hộp nâu trước. Nếu muốn hộp 70% trong suốt, nhưng không văn bản bên trong, dùng mã:
.div1 { text-align: center; padding: 20px; color: black; background: rgba(181, 101, 29, 0.3); }
Mã trả về:
Giá trị opacity chỉ định là 0.3. Vì opacity càng thấp càng trong suốt, 0.3 nghĩa phần tử 70% trong suốt. Ta cũng đặt màu văn bản đen.
Hộp trên là <div> không opacity. Hộp dưới dùng rgba() đặt opacity 0.3. Như thấy, hộp dưới trong suốt hơn hộp trên.
Tuy nhiên, nội dung hộp—văn bản Đây là hộp—không trong suốt hơn. Vì ta đặt màu nền hộp trong suốt.
Kết luận
Thuộc tính CSS opacity dùng đặt độ trong suốt phần tử trang web.
Hướng dẫn thảo luận, tham chiếu ví dụ, cách dùng opacity thay đổi opacity hình ảnh và hộp. Hướng dẫn cũng khám phá màu RGBA tạo hiệu ứng trong suốt CSS. Bây giờ bạn trang bị kiến thức làm việc opacity như chuyên gia!