background: none vs background: transparent sự khác biệt là gì?

Có sự khác biệt giữa hai thuộc tính CSS này không:

background: none;
background: transparent;

1. Cả hai đều hợp lệ?
2. Cái nào nên được sử dụng và tại sao?

Không có sự khác biệt giữa chúng.

Nếu bạn không chỉ định giá trị cho bất kỳ thuộc tính nào trong số nửa tá thuộc tính backgroundviết tắt của nó, thì nó được đặt thành giá trị mặc định. nonevàtransparent là các giá trị mặc định.

Một cách rõ ràng đặt background-imagethành nonevà ngầm định đặt background-colorthành transparent. Còn lại thì ngược lại.

Như thông tin bổ sung về câu trả lời @Quentin và như anh ấy nói đúng, backgroundbản thân thuộc tính CSS, là cách viết tắt của:

background-color
background-image
background-repeat
background-attachment
background-position

Điều đó có nghĩa là, bạn có thể nhóm tất cả các kiểu trong một, như:

background: red url(../img.jpg) 0 0 no-repeat fixed;

Điều này sẽ là (trong ví dụ này):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Vì vậy, ... khi bạn đặt: background:none;
bạn đang nói rằng tất cả các thuộc tính nền được đặt thành không ...
Bạn đang nói điều đó background-image: none;và tất cả các thuộc tính khác về initialtrạng thái (vì chúng không được khai báo).
Vì vậy, background:none;là:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Bây giờ, khi bạn chỉ xác định màu (trong trường hợp của bạn transparent) thì về cơ bản bạn đang nói:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Tôi lặp lại, như @Quentin một cách đúng đắn nói sự default transparentvà nonecác giá trị trong trường hợp này đều giống nhau, vì vậy trong ví dụ của bạn và cho câu hỏi ban đầu của bạn, Không, không có sự khác biệt giữa chúng.

Nhưng! .. nếu bạn nói background:noneVs background:redthì có ... có một sự khác biệt lớn, như tôi đã nói, cái đầu tiên sẽ đặt tất cả các thuộc tính thành none/defaultvà cái thứ hai, sẽ chỉ thay đổi colorphần còn lại trongdefault trạng thái .

Tóm lại:

Câu trả lời ngắn : Không, không có sự khác biệt nào cả (trong ví dụ và câu hỏi ban đầu của bạn)
Câu trả lời dài : Có, có sự khác biệt lớn, nhưng phụ thuộc trực tiếp vào các thuộc tính được cấp cho thuộc tính.

Upd1: Giá trị ban đầu (còn gọi là default)

Giá trị ban đầu là sự nối các giá trị ban đầu của thuộc tính tốc ký của nó:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

Xem thêm backgroundmô tả tại đây

Upd2: Làm rõ background:none;thông số kỹ thuật tốt hơn .

Để bổ sung cho các câu trả lời khác: nếu bạn muốn đặt lại tất cả các thuộc tính nền về giá trị ban đầu của chúng (bao gồm background-color: transparentvà background-image: none) mà không chỉ định rõ ràng bất kỳ giá trị nào như transparenthoặc none, bạn có thể làm như vậy bằng cách viết:

background: initial;