Thay đổi màu sắc của css hình nền

Thuộc tính

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

2 trong CSS áp dụng một hình ảnh (e. g. PNG, SVG, JPG, GIF, WEBP) hoặc chuyển màu sang nền của một phần tử

Có hai loại hình ảnh khác nhau mà bạn có thể đưa vào bằng CSS. hình ảnh thông thường và độ dốc

Hình ảnh

Sử dụng hình ảnh trên nền khá đơn giản

body {
  background: url(sweettexture.jpg);
}

Giá trị

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

3 cho phép bạn cung cấp đường dẫn tệp tới bất kỳ hình ảnh nào và nó sẽ hiển thị dưới dạng nền cho phần tử đó

Bạn cũng có thể đặt URI dữ liệu cho

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

3. Trông như thế này

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Kỹ thuật này loại bỏ một yêu cầu HTTP, đây là một điều tốt. Tuy nhiên, có một số nhược điểm, vì vậy trước khi bạn bắt đầu thay thế tất cả các hình ảnh của mình, hãy đảm bảo rằng bạn đã xem xét tất cả các ưu và nhược điểm của URI dữ liệu

Bạn cũng có thể sử dụng

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

2 để chia nhỏ hình ảnh, đây là một phương pháp hữu ích khác để giảm yêu cầu HTTP

Độ dốc

Một tùy chọn khác khi sử dụng hình nền là yêu cầu trình duyệt tạo độ dốc. Đây là một ví dụ siêu đơn giản về gradient tuyến tính

body {
  background: linear-gradient(black, white);
}

Bạn cũng có thể sử dụng gradient xuyên tâm

body {
  background: radial-gradient(circle, black, white);
}

Về mặt kỹ thuật, độ dốc chỉ là một dạng khác của hình nền. Sự khác biệt là trình duyệt tạo hình ảnh cho bạn. Dưới đây là toàn bộ hướng dẫn về cách tạo và sử dụng chúng

Ví dụ trên chỉ sử dụng một dải màu, nhưng bạn cũng có thể xếp nhiều dải màu lên nhau. Có một số mẫu khá tuyệt vời mà bạn có thể tạo bằng kỹ thuật này

Đặt màu dự phòng

Nếu hình nền không tải được hoặc nền chuyển màu của bạn được xem trên trình duyệt không hỗ trợ chuyển màu, thì trình duyệt sẽ tìm màu nền làm màu dự phòng. Bạn có thể chỉ định màu dự phòng của mình như thế này

body {
  background: url(sweettexture.jpg) blue;
}

Nhiều hình nền

Bạn có thể sử dụng nhiều hình ảnh hoặc hỗn hợp hình ảnh và chuyển màu cho nền của mình. Nhiều hình nền hiện được hỗ trợ tốt (tất cả các trình duyệt hiện đại và IE9+ cho hình ảnh đồ họa, IE10+ cho độ dốc)

Khi bạn đang sử dụng nhiều hình nền, hãy lưu ý rằng có một thứ tự xếp chồng hơi phản trực giác. Liệt kê hình ảnh nên ở phía trước và hình ảnh nên ở phía sau, như thế này

body {
  background: url(logo.png), url(background-pattern.png);
}

Khi bạn đang sử dụng nhiều hình nền, bạn sẽ thường cần đặt nhiều giá trị hơn cho nền để mọi thứ ở đúng vị trí. Nếu bạn muốn sử dụng tốc ký

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

1, bạn có thể đặt các giá trị cho từng hình ảnh riêng lẻ. Tốc ký của bạn sẽ giống như thế này (chú ý dấu phẩy ngăn cách hình ảnh đầu tiên và các giá trị của nó với hình ảnh thứ hai và các giá trị của nó)

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

Không có giới hạn về số lượng hình nền bạn có thể đặt và bạn có thể làm những điều thú vị như tạo hiệu ứng cho hình nền của mình. Có một ví dụ điển hình về nhiều hình nền có hoạt ảnh trên blog của David Walsh

Thuộc tính màu nền trong CSS được sử dụng để đặt màu nền cho phần tử. Nó áp dụng các màu đồng nhất làm nền của phần tử. Nền của một phần tử bao phủ toàn bộ kích thước, bao gồm cả phần đệm và đường viền, nhưng không bao gồm lề. Nó có thể được áp dụng cho tất cả các phần tử HTML

cú pháp

Giá trị color_name của thuộc tính này xác định giá trị của màu nền hoặc chỉ định mã màu. Nó có thể được đưa ra bằng cách sử dụng tên màu, giá trị rgb() hoặc giá trị thập lục phân

Giá trị trong suốt của thuộc tính này là giá trị mặc định, chỉ định màu nền trong suốt

Thí dụ

Trong ví dụ này, chúng tôi đang xác định giá trị của thuộc tính màu nền bằng cách sử dụng tên màu, giá trị thập lục phân, giá trị rgb() và giá trị hsl(). Có bốn phần tử div mà chúng tôi áp dụng thuộc tính màu nền

Cách dễ nhất để thay đổi màu của hình ảnh png là sử dụng thuộc tính bộ lọc, áp dụng hiệu ứng hình ảnh cho phần tử (hình ảnh). Nó có các giá trị sau

________số 8

Với những giá trị này, chúng ta có thể thay đổi màu sắc của hình ảnh

Bộ lọc mới đối với trình duyệt và chỉ được hỗ trợ trong các trình duyệt hiện đại. Bạn có thể sử dụng -webkit-filter cho Safari, Google Chrome và Opera

Hãy từng bước thay đổi màu ảnh

• Sao chép và dán liên kết hình ảnh của bạn trong phần. Chúng tôi sử dụng hai hình ảnh với các lớp "hình ảnh-1" và "hình ảnh-2"

Bây giờ, chúng tôi thêm các kiểu vào các lớp "hình ảnh-1" và "hình ảnh-2"

• Sử dụng thuộc tính chiều rộng để đặt chiều rộng của cả hai hình ảnh
• Đặt thuộc tính bộ lọc với giá trị "đảo ngược" của nó trên lớp "hình ảnh-1". Chúng tôi đặt 100% để làm cho hình ảnh bị đảo ngược hoàn toàn
• Sử dụng thuộc tính bộ lọc với giá trị "nâu đỏ" (100%) trên lớp "image-2"

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

0

Vì vậy, hãy xem kết quả của mã của chúng tôi

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

1

Kết quả

Thay đổi màu ảnh PNG

Tiếp theo, hãy xem một ví dụ khác với tám giá trị của thuộc tính bộ lọc

Bạn cũng có thể áp dụng một kỹ thuật khác. Trong ví dụ tiếp theo, chúng tôi đặt thuộc tính id ("gốc" và "đã thay đổi") cho

Chúng ta có thể thay đổi màu của hình nền trong CSS không?

Làm cách nào để thay đổi nền của hình ảnh trong CSS?

Làm cách nào để thay đổi màu nền của hình ảnh?