Chúng ta có thể sử dụng CSS Linear Gradient để làm tối hình nền trong CSS. Hàm
body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
6 tạo nền có độ dốc tuyến tính. Độ dốc tuyến tính là sự chuyển tiếp suôn sẻ giữa ít nhất hai màu khác nhau. Hàm nhận vô số tham số màu. Chúng ta có thể đặt hướng của gradient làm tham số đầu tiên. Các tùy chọn chỉ đường là body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
7, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
8, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
9, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
0, v.v. Chúng ta có thể áp dụng gradient tuyến tính cho hình nền và đặt màu tối hơn với độ mờ để làm tối hình nền. Chúng ta có thể sử dụng hàm body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
1 trong hàm body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
6 để đặt màu. Ở đây chúng ta chỉ làm tối hình nền mà không làm tối các thành phần khácVí dụ: chọn vùng chứa trong CSS và sử dụng thuộc tính tốc ký
body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
0 để đặt độ dốc tuyến tính và hình nền. Viết hàm body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
6 và đặt hai điểm dừng màu là body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
2. Tiếp theo, sử dụng chức năng body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
3 để đặt hình nền bạn chọn. Sử dụng các thuộc tính nền khác nhau để đặt hình ảnh chính xác trong nền. Đặt body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
4 thành body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
5, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
6 thành body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
7 và body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
8 thành body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
9. Đặt chiều cao thành #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
0. Đảm bảo chọn các thẻ #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
1 và #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
2 và đặt chiều cao thành #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
0 và lề thành #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
4Trong ví dụ bên dưới, chúng tôi đã sử dụng
body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
2 làm hai điểm dừng màu. Hàm #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
6 tương đương với màu đen. Giá trị thứ tư là giá trị cho độ mờ. Giá trị gần với #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
7 làm cho nó tối hơn và ngược lại. Chúng ta có thể điều chỉnh giá trị độ mờ tùy theo nhu cầu làm tối nền ảnh. Bằng cách này, chúng ta có thể sử dụng gradient tuyến tính để làm tối hình nền trong CSSMã ví dụ
body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
7____0Sử dụng thuộc tính #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
8 để làm tối hình nền trong CSS
#background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
Chúng ta có thể sử dụng thuộc tính
#background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
8 để làm tối hình nền trong CSS. Thuộc tính đặt chế độ hòa trộn của nền. Có nhiều lựa chọn khác nhau cho tài sản này. Một số tùy chọn là body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
60, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
61, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
62, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
63, body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
64, v.v. Chúng ta có thể sử dụng tùy chọn body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
62 để làm cho hình nền tối hơn. Chúng ta có thể đặt màu cho ảnh nền bằng hàm body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
1Ví dụ: chọn id
body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
0 trong CSS và sử dụng thuộc tính body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
0 để đặt màu và hình nền. Đặt màu là ________ 02 và sử dụng hình ảnh giữ chỗ trong hàm ________ 03. Sử dụng các thuộc tính nền khác nhau như trong phương pháp đầu tiên để đặt hình ảnh chính xác. Tiếp theo, sử dụng thuộc tính #background {
background: rgba[0, 0, 0, 0.7] url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
8 và đặt thành body, html {
height: 100%;
margin: 0;
}
#background {
background: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url['//loremflickr.com/320/240'];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
62