Làm thế nào để bạn làm tối một hình ảnh trong css?

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('https://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('https://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('https://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('https://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('https://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('https://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('https://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ác

Ví 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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://loremflickr.com/320/240');
 height: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 background-blend-mode: darken;
}

4

Trong 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('https://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('https://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('https://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 CSS

Mã 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('https://loremflickr.com/320/240');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

7____0

Sử dụng thuộc tính

#background { 
 background: rgba(0, 0, 0, 0.7) url('https://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

Chúng ta có thể sử dụng thuộc tính

#background { 
 background: rgba(0, 0, 0, 0.7) url('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://loremflickr.com/320/240');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

1

Ví 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('https://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('https://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('https://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('https://loremflickr.com/320/240');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

62