Khi bạn thêm hình nền vào phần tử Ví dụ: giả sử bạn có phần thân HTML sau Và sau đó bạn đặt quy tắc CSS sau cho lớp Đầu ra của đoạn mã trên sẽ như sau Hình nền có độ mờ Như bạn có thể thấy, phần tử Điều này là do thuộc tính Để giải quyết vấn đề này, bạn cần đặt hình nền là con của thẻ Hãy xem cú pháp CSS sau Bộ chọn giả Cuối cùng, vị trí Đầu ra sẽ như sau Đã sửa độ mờ của hình nền bằng cách sử dụng phần tử giả Bây giờ độ trong suốt của hình nền sẽ không được áp dụng cho nội dung của thẻ Ngoài ra, bạn cũng có thể đặt hình nền chỉ trong suốt khi con trỏ di chuyển qua phần tử bằng cách sử dụng cú pháp CSS sau
Hello World from the Doge!
bg-doge
[hình ảnh được sử dụng cho ví dụ này được tải xuống từ Unsplash].bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
bên trong thẻ
opacity
, khiến nó trở nên trong suốt giống như hình nềnopacity
áp dụng cho mọi thứ bên trong phần tử vùng chứa. Bạn không thể làm cho phần tử con kém minh bạch hơn phần tử cha của nó
2.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
.bg-doge {
position: relative;
height: 600;
/* extra style to center the content */
display: flex;
align-items: center;
justify-content: center;
}
.bg-doge:before {
content: "";
background-image: url[bg-doge.jpeg];
position: absolute;
background-size: cover;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
opacity: .6;
}
2 ở trên được sử dụng để tạo hình nền. Vị trí tuyệt đối và các giá trị trên, trái, dưới, phải được áp dụng sao cho phần tử giả có cùng kích thước với phần tử gốc của nó.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
4 của phần tử giả được đặt thành .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
5 để đặt nó ở cuối đơn hàng. Nếu không có thuộc tính .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
4, nó sẽ được đặt lên trên các phần tử khác, chặn nội dung khỏi chế độ xem.bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
7 được đặt thành .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
8 để phần tử giả được chứa bên trong .bg-doge {
background-image: url[bg-doge.jpeg];
background-size: cover;
height: 600;
opacity: 0.4;
/* extra style to center the content */
/* you can remove them later */
display: flex;
align-items: center;
justify-content: center;
}
.color-white {
color: #fff;
background-color: #000;
}
Bạn có thể thay đổi độ mờ của hình nền trong CSS không?
Làm thế nào để làm cho nền hình ảnh trong suốt?
Chủ Đề
Cách đặt độ mờ của hình nền cơ thể trong css
, bạn có thể muốn thay đổi độ mờ của hình ảnh để nội dung của phần tử
có thể nổi bật và dễ nhìn hơn
bị ảnh hưởng bởi thuộc tính
bằng cách sử dụng bộ chọn phần tử giả
độ mờ là một thuộc tính CSS cho phép bạn thay đổi độ mờ của một phần tử . Theo mặc định, tất cả các phần tử đều có giá trị là 1. Bằng cách thay đổi giá trị này gần hơn với 0, phần tử sẽ xuất hiện ngày càng trong suốt hơn. Trường hợp sử dụng phổ biến là sử dụng hình ảnh làm một phần của nền.
Làm cho nền của bạn trong suốt bằng Adobe Photoshop .
Mở tệp biểu tượng
Thêm một lớp trong suốt. Chọn “Layer” > “New Layer” từ menu [hoặc chỉ cần nhấp vào biểu tượng hình vuông trong cửa sổ lớp]. .
Xóa nền. .
Lưu dưới dạng hình ảnh PNG trong suốt