Để tạo giao diện đó, bạn có thể đặt hình ảnh làm nền của div và sau đó tạo độ dốc "từ đen sang trong thành đen" trong div để nó xuất hiện trên đầu hình ảnh
.slideBanner{
background-image: url['../images/Ramsey.jpg'];
}
.slideBanner{
background: -moz-linear-gradient[left, rgba[0,0,0,0.65] 0%, rgba[255,255,255,0] 48%, rgba[2,2,2,1] 100%]; /* FF3.6-15 */
background: -webkit-linear-gradient[left, rgba[0,0,0,0.65] 0%,rgba[255,255,255,0] 48%,rgba[2,2,2,1] 100%]; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient[to right, rgba[0,0,0,0.65] 0%,rgba[255,255,255,0] 48%,rgba[2,2,2,1] 100%]; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient[ startColorstr='#a6000000', endColorstr='#020202',GradientType=1 ]; /* IE6-9 */
}
Tôi tìm thấy mã gradient này từ một trong nhiều trình tạo gradient. http. //www. màu sắc. com/gradient-editor/
với các cài đặt này
Kỹ thuật này hơi lỗi thời bởi tính khả dụng của background-blend-mode
, mặc dù các chế độ hòa trộn có hạn chế là chúng chưa được hỗ trợ trong tất cả các trình duyệt hiện tại
Chưa có điều khiển background-opacity
trong CSS, nhưng có một cách dễ dàng để giả mạo nó, bằng cách sử dụng nhiều hình nền. Thủ thuật là thao túng thực tế rằng thuộc tính background-image
cũng sẽ có màu CSS… bao gồm rgba
Có thể sử dụng nền “rửa sạch” để tăng cường độ tương phản giữa văn bản và hình ảnh đằng sau nó. Đương nhiên, bạn có thể giảm độ mờ của hình ảnh bằng cách xử lý nó trong PhotoShop, nhưng điều đó thường cần thử nghiệm qua lại nhiều lần giữa trình duyệt và ứng dụng đồ họa, trong khi viết các thay đổi trực quan trong CSS trực tiếp và hiệu quả hơn nhiều
Hình nền, trước khi tạo lớpThứ tự của nền trong khai báo nhiều nền là từ trước ra sau, vì vậy chúng tôi chỉ định ảnh tổng hợp [từ tác phẩm của Thomas Shahan] cuối cùng trong biểu ngữ cho blog côn trùng học hư cấu Bug Crazy
h1 {
font-family: Calluna Sans, Arial, sans-serif;
color: #fff; margin-top: 0;
background: linear-gradient[rgba[0,0,0,0.5],
rgba[0,0,0,0.5]],
url['bugs.jpg'];
font-size: 5rem; padding: 2rem;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
word-spacing: 5rem;
}
Áp dụng cho
Bug Crazy
Điều đó tạo ra kết quả mà bạn nhìn thấy ở đầu trang;
Tìm hiểu cách tạo ảnh nền mờ bằng CSS
Làm mờ hình nền
Ghi chú. Ví dụ này không hoạt động trong Edge 12, IE 11 hoặc các phiên bản cũ hơn
Tự mình thử »
Cách tạo ảnh nền mờ
Bước 1] Thêm HTMLThí dụ
Tôi là John Doe
Và tôi là một nhiếp ảnh gia
Bước 2] Thêm CSS
Thí dụ
nội dung, html {
chiều cao. 100%;
}
* {
kích thước hộp. hộp viền;
}
hình ảnh bg {
/* Hình ảnh được sử dụng */
hình nền. url["nhiếp ảnh gia. jpg"];
/* Thêm hiệu ứng làm mờ */
lọc. làm mờ [8px];
-webkit-bộ lọc. làm mờ [8px];
/* Chiều cao đầy đủ */
chiều cao. 100%;
/* Căn giữa và chia tỷ lệ hình ảnh cho đẹp */
vị trí nền. trung tâm;
Bối cảnh Lặp lại. không lặp lại;
kích thước nền. che phủ;
}
/* Định vị văn bản ở giữa trang/hình ảnh */
bg-văn bản {
màu nền. rgb[0,0,0];
màu nền. rgba[0,0,0, 0. 4];
màu. trắng;
trọng lượng phông chữ. Dũng cảm;
biên giới. 3px cố định #f1f1f1;
Chức vụ. tuyệt đối;
đứng đầu. 50%;
bên trái. 50%;
biến đổi. dịch[-50%, -50%];
chỉ số z. 2;
bề rộng. 80%;
đệm. 20px;
căn chỉnh văn bản. trung tâm;
}
Thuộc tính opacity
thường được sử dụng cùng với bộ chọn :hover
để thay đổi độ mờ khi di chuột qua
Ví dụ giải thích
Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng tôi đã thêm điều gì sẽ xảy ra khi người dùng di chuột qua một trong các hình ảnh. Trong trường hợp này, chúng tôi muốn hình ảnh KHÔNG trong suốt khi người dùng di chuột qua nó. CSS cho điều này là opacity:1;
Khi con trỏ chuột di chuyển ra khỏi hình ảnh, hình ảnh sẽ trong suốt trở lại
Một ví dụ về hiệu ứng di chuột đảo ngược
Hộp trong suốt
Khi sử dụng thuộc tính opacity
để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc
Minh bạch sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản
Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha [RGBA] - chỉ định độ mờ cho màu
Giá trị màu RGBA được chỉ định với. rgba [đỏ, lục, lam, alpha]. Tham số alpha là một số trong khoảng từ 0. 0 [hoàn toàn trong suốt] và 1. 0 [đục hoàn toàn]