Để 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ớp

Thứ 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 HTML

Thí 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;
}

Tự mình thử »

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)