Làm nền của bạn trong suốt
Một trong những điều mà bạn có thể dễ dàng thực hiện trong thiết kế in nhưng không phải trên Web là lớp phủ văn bản trên hình ảnh hoặc nền màu và thay đổi độ trong suốt của hình ảnh đó để văn bản mờ dần vào nền. Nhưng có một thuộc tính trong CSS3 sẽ cho phép bạn thay đổi độ mờ đục của các phần tử để chúng mờ dần vào và ra: độ mờ đục.
Cách sử dụng thuộc tính Opacity
Thuộc tính độ mờ có giá trị của độ trong suốt từ 0,0 đến 1,0.
0,0 là 100% trong suốt — bất kỳ thứ gì bên dưới phần tử đó sẽ hiển thị hoàn toàn. 1.0 là 100% mờ - không có gì bên dưới phần tử sẽ hiển thị qua.
Vì vậy, để đặt một phần tử thành 50% trong suốt, bạn sẽ viết:
độ mờ: 0,5;
Xem một số ví dụ về độ mờ trong hành động
Hãy chắc chắn kiểm tra trong các trình duyệt cũ hơn
Cả IE 6 lẫn 7 đều không hỗ trợ thuộc tính opacity CSS3. Nhưng bạn không may mắn. Thay vào đó, IE hỗ trợ bộ lọc alpha thuộc tính duy nhất của Microsoft. Bộ lọc Alpha trong IE chấp nhận các giá trị từ 0 (hoàn toàn trong suốt) đến 100 (hoàn toàn mờ đục). Vì vậy, để có được sự minh bạch của bạn trong IE, bạn nên nhân mức Opacity của bạn với 100 và thêm một bộ lọc alpha vào kiểu của bạn:
bộ lọc: alpha (opacity = 50);
Xem bộ lọc alpha đang hoạt động (chỉ có trong IE)
Và sử dụng tiền tố trình duyệt
Bạn nên sử dụng các tiền tố -moz- và -webkit- để các phiên bản cũ hơn của các trình duyệt Mozilla và Webkit cũng hỗ trợ nó:
-Webkit-opacity: 0,5;
-moz-opacity: 0,5;
độ mờ: 0,5;
Luôn đặt tiền tố trình duyệt trước và thuộc tính CSS3 hợp lệ cuối cùng.
Kiểm tra các tiền tố trình duyệt trong các trình duyệt Mozilla và Webkit cũ hơn.
Bạn có thể làm cho hình ảnh trong suốt quá
Đặt độ mờ đục trên chính hình ảnh và nó sẽ mờ dần vào nền. Điều này thực sự hữu ích cho hình nền .
Và nếu bạn thêm vào một thẻ neo, bạn có thể tạo các hiệu ứng di chuột chỉ bằng cách thay đổi độ mờ của hình ảnh.
a: hover img {
bộ lọc: alpha (opacity = 50)
bộ lọc: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0,5;
-Webkit-opacity: 0,5;
độ mờ: 0,5;
}
Ảnh hưởng đến HTML này:
Kiểm tra các kiểu trên và HTML đang hoạt động.
Đặt văn bản trên hình ảnh của bạn
Với độ mờ, bạn có thể đặt văn bản lên hình ảnh và hình ảnh xuất hiện mờ dần khi văn bản đó ở đâu.
Kỹ thuật này hơi phức tạp một chút, bởi vì bạn không thể đơn giản làm mờ hình ảnh, vì nó sẽ làm mờ toàn bộ hình ảnh. Và bạn không thể làm mờ hộp văn bản , bởi vì văn bản sẽ mờ dần ở đó.
- Trước tiên, bạn tạo một vùng chứa DIV và đặt hình ảnh của bạn vào bên trong:
- Thực hiện theo hình ảnh với một DIV trống - đây là những gì bạn sẽ làm cho minh bạch.
- Điều cuối cùng bạn thêm vào HTML là DIV với văn bản của bạn trong đó:
Đây là con chó Shasta của tôi. Không phải anh ấy dễ thương! - Bạn tạo kiểu cho nó với định vị CSS, để đặt văn bản phía trên hình ảnh. Tôi đặt văn bản của tôi ở phía bên trái, nhưng bạn có thể đặt nó ở bên phải bằng cách thay đổi hai bên trái: 0; các thuộc tính ở bên phải: 0; .
#image {
vị trí: tương đối;
chiều rộng: 170px;
chiều cao: 128px;
lề: 0;
}
#bản văn {
vị trí: tuyệt đối;
trên cùng: 0;
trái: 0;
chiều rộng: 60px;
chiều cao: 118px;
nền: #fff;
đệm: 5px;
}
#bản văn {
bộ lọc: alpha (opacity = 70);
bộ lọc: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0,70;
độ mờ đục: 0,7;
}
#từ ngữ {
vị trí: tuyệt đối;
trên cùng: 0;
trái: 0;
chiều rộng: 60px;
chiều cao: 118px;
nền: minh bạch;
đệm: 5px;
}
Xem nó trông như thế nào