Màu nền có phải là CSS không hợp lệ không?

html {
  background: url(bg.png);
  font-family: sans-serif;
  font-size: 10px;
}

body {
  width: 1024px;
  margin: 0 auto;
}

p {
  color: white;
  text-shadow: 0 1px 1px black;
  padding: 10px;
  font-size: 1.4rem;
}

div {
  height: 75px;
  float: left;
  width: 32%;
  margin-right: 1%;
  box-shadow: 0px 0px 10px black;
}

h2 {
  clear: both;
  padding-top: 1.5rem;
}

#c1 {
  background-color: red;
}

#c2 {
  background-color: green;
}

#c3 {
  background-color: blue;
}

#c4 {
  background-color: #ff0000;
}

#c5 {
  background-color: #008000;
}

#c6 {
  background-color: #0000ff;
}

etc

html {
  background: url(bg.png);
  font-family: sans-serif;
  font-size: 10px;
}

body {
  width: 1024px;
  margin: 0 auto;
}

p {
  color: white;
  text-shadow: 0 1px 1px black;
  padding: 10px;
  font-size: 1.4rem;
}

div {
  height: 75px;
  float: left;
  width: 32%;
  margin-right: 1%;
  box-shadow: 0px 0px 10px black;
}

h2 {
  clear: both;
  padding-top: 1.5rem;
}

#c1 {
  background-color: red;
}

#c2 {
  background-color: green;
}

#c3 {
  background-color: blue;
}

#c4 {
  background-color: #ff0000;
}

#c5 {
  background-color: #008000;
}

#c6 {
  background-color: #0000ff;
}

etc

Thuộc tính opacity chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0. 0 - 1. 0. Giá trị càng thấp, càng minh bạch

Ghi chú. 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)

Nền của một phần tử là tổng kích thước của phần tử, bao gồm cả phần đệm và đường viền (nhưng không phải là lề)

Mẹo. Sử dụng màu nền và màu văn bản giúp văn bản dễ đọc

Đưa ra bản chạy thử ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Thuộc tínhbackground-color1. 04. 01. 01. 03. 5

Cú pháp CSS

màu nền. màu. trong suốt. ban đầu. thừa kế;

Giá trị tài sản

ValueDescriptionDemocolorChỉ định màu nền. Xem Giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có. Demo ❯transparent Chỉ định rằng màu nền phải trong suốt. Đây là defaultDemo ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Lớp giả CSS :valid đại diện cho bất kỳ phần tử <input> hoặc phần tử <form> nào có nội dung xác thực thành công. Điều này cho phép dễ dàng làm cho các trường hợp lệ có giao diện giúp người dùng xác nhận rằng dữ liệu của họ được định dạng đúng

:valid

<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>