Sự khác biệt giữa màu nền và màu nền

Sự khác biệt giữa chỉ định màu nền bằng cách sử dụng backgroundvà là background-colorgì?

Đoạn trích số 1

body { background-color: blue; }

Đoạn trích số 2

body { background: blue; }

Dự đoán rằng đó là hai thuộc tính riêng biệt, trong ví dụ cụ thể của bạn không có sự khác biệt nào trong kết quả, vì backgroundthực sự là một cách viết tắt cho

hình nền màu
nền hình ảnh
nền-vị trí
nền lặp lại
nền-tập tin đính kèm
nền-clip
nền
kích thước nền

Do đó, bên cạnh việc background-colorsử dụng backgroundphím tắt, bạn cũng có thể thêm một hoặc nhiều giá trị mà không lặp lại bất kỳ thuộc tính nào khác background-*nhiều lần.

Lựa chọn nào là cơ bản tùy thuộc vào bạn, nhưng nó cũng có thể phụ thuộc vào các điều kiện cụ thể của khai báo kiểu của bạn (ví dụ: nếu bạn cần ghi đè chỉ background-colorkhi kế thừa các background-*thuộc tính liên quan khác từ phần tử cha hoặc nếu bạn cần xóa tất cả các giá trị ngoại trừ background-color).

backgroundsẽ supercede tất cả trước đó background-color, background-imagevv thông số kỹ thuật. Về cơ bản nó là một tốc ký, nhưng cũng là một thiết lập lại .

Đôi khi tôi sẽ sử dụng nó để ghi đè các backgroundthông số kỹ thuật trước đó trong các tùy chỉnh mẫu, nơi tôi muốn như sau:

background: white url(images/image1.jpg) top left repeat;

như sau:

background: black;

Vì vậy, tất cả các thông số ( background-image, background-position, background-repeat) sẽ thiết lập lại giá trị mặc định của họ.

Về hiệu suất CSS :

backgroundvs background-color:

So sánh 18 mẫu màu được hiển thị 100 lần trên một trang dưới dạng hình chữ nhật nhỏ, một lần với nền và một lần với màu nền .

Mặc dù những con số này là từ một trang tải lại, với lần làm mới tiếp theo, thời gian kết xuất đã thay đổi, nhưng về cơ bản thì phần trăm giống nhau mỗi lần.

Đó là mức tiết kiệm gần 42,6ms, nhanh gần gấp đôi , khi sử dụng màu nền thay vì màu nền trong Safari 7.0.1. Chrome 33 dường như giống nhau.

Điều này thực sự thổi tôi đi vì trong thời gian dài nhất vì hai lý do:

• Tôi thường luôn tranh luận về việc làm chứng trong các thuộc tính CSS, đặc biệt là với các nền vì nó có thể ảnh hưởng xấu đến tính đặc hiệu.
• Tôi nghĩ rằng khi một trình duyệt nhìn thấy background: #000;, họ thực sự thấy background: #000 none no-repeat top center;. Tôi không có liên kết đến một tài nguyên ở đây, nhưng tôi nhớ đã đọc nó ở đâu đó.

Tham chiếu: https://github.com/mdo/css-perf#background-vs-background-color

Với backgroundbạn có thể đặt tất cả các backgroundthuộc tính như:

• background-color
• background-image
  
• background-repeat
  
• background-position
  Vân vân.

Với background-colorbạn chỉ có thể chỉ định màu của nền

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Thêm thông tin

(Xem chú thích: Bối cảnh - Thuộc tính tốc ký)

Một trong những khác biệt:

Nếu bạn sử dụng hình ảnh làm nền theo cách này:

background: url('Image Path') no-repeat;

sau đó bạn không thể ghi đè lên nó bằng thuộc tính "màu nền".

Nhưng nếu bạn đang sử dụng nền để áp dụng một màu, nó cũng giống như màu nền và có thể được ghi đè.

ví dụ: http://jsfiddle.net/Z57Za/11/ và http://jsfiddle.net/Z57Za/12/

Cả hai đều giống nhau. Có rất nhiều bộ chọn nền (ví dụ background-color, background-image, background-position) và bạn có thể truy cập chúng hoặc thông qua các đơn giản backgroundchọn hoặc một cụ thể hơn. Ví dụ:

background: blue url(/myImage.jpg) no-repeat;

hoặc là

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Sự khác biệt là thuộc tính tốc backgroundký đặt một số thuộc tính liên quan đến nền. Nó đặt tất cả, ngay cả khi bạn chỉ định ví dụ như một giá trị màu, kể từ đó các thuộc tính khác được thiết lập để các giá trị ban đầu của họ, ví dụ như background-imageđể none.

Điều này không có nghĩa là nó sẽ luôn ghi đè bất kỳ cài đặt nào khác cho các thuộc tính đó. Điều này phụ thuộc vào tầng theo các quy tắc thông thường, thường bị hiểu lầm.

Trong thực tế, tốc ký có xu hướng an toàn hơn một chút. Đó là một biện pháp phòng ngừa (không đầy đủ, nhưng hữu ích) chống lại việc vô tình nhận được một số thuộc tính nền không mong muốn, chẳng hạn như hình nền, từ một biểu định kiểu khác. Bên cạnh đó, nó ngắn hơn. Nhưng bạn cần nhớ rằng nó thực sự có nghĩa là Tập hợp tất cả các thuộc tính nền.

Không có sự khác biệt. Cả hai sẽ làm việc theo cùng một cách.

Thuộc tính nền CSS được sử dụng để xác định hiệu ứng nền của một phần tử.

Các thuộc tính CSS được sử dụng cho các hiệu ứng nền:

• màu nền
• hình nền
• Bối cảnh Lặp lại
• đính kèm nền
• vị trí nền

Thuộc tính nền bao gồm tất cả các thuộc tính này và bạn chỉ có thể viết chúng trong một dòng.

Đây là câu trả lời tốt nhất. Shorthand (nền) là để thiết lập lại và DRY (kết hợp với longhand).

So sánh 18 mẫu màu được hiển thị 100 lần trên một trang dưới dạng hình chữ nhật nhỏ, một lần với nền và một lần với màu nền.

Tôi đã tạo lại thử nghiệm hiệu suất CSS và kết quả ngày nay khác nhau đáng kể.

background

Chrome 54 : 443 (Từ / div)

Firefox 49 : 162 (Từ / div)

Cạnh 10 : 56 (Âm / div)

background-color

Chrome 54 : 449 (Từ / div)

Firefox 49 : 171 (Từ / div)

Cạnh 10 : 58 (Thượng hạng / div)

Như bạn thấy - hầu như không có sự khác biệt.

backgroundlà lối tắt cho background-colorvà một số nội dung liên quan đến nền khác như dưới đây:

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

Đọc tuyên bố dưới đây từ W3C:

Bối cảnh - Tài sản tốc ký

Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là một tài sản tốc ký.

Thuộc tính tốc ký cho nền là nền:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Khi sử dụng thuộc tính tốc ký, thứ tự của các giá trị thuộc tính là:

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

Không có vấn đề gì nếu một trong các giá trị thuộc tính bị thiếu, miễn là các giá trị khác theo thứ tự này.

Tôi thấy rằng bạn không thể thiết lập một gradient với màu nền.

Những công việc này:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Đây không phải là:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background là tài sản tốc ký cho những điều sau đây:

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

Bạn có thể thông tin chi tiết về mọi tài sản ở đây

Thứ tự thuộc tính

Trong hầu hết việc triển khai trình duyệt (tôi nghĩ có lẽ trình duyệt cũ hơn có thể gặp sự cố) thứ tự của các thuộc tính không quan trọng, ngoại trừ:

• background-originvà background-clip: khi cả hai thuộc tính này có mặt, thì thuộc tính thứ nhất tham chiếu -originvà thuộc tính thứ hai -clip.

  Thí dụ:

  background: content-box green padding-box;

  Tương đương với:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizephải luôn tuân theo background-positionvà các thuộc tính phải được phân tách bằng/

• if background-positionđược tạo bởi hai số, số thứ nhất là giá trị ngang và giá trị thứ hai là giá trị dọc.

Tôi đã nhận thấy khi tạo email cho Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Bạn có thể làm một số thứ khá gọn gàng một khi bạn hiểu rằng bạn có thể chơi với sự kế thừa với điều này. Tuy nhiên, trước tiên hãy hiểu điều gì đó từ tài liệu này trên nền:

Với CSS3, bạn có thể áp dụng nhiều nền cho các yếu tố. Chúng được xếp chồng lên nhau với nền đầu tiên bạn cung cấp ở trên và nền cuối cùng được liệt kê ở phía sau. Chỉ nền cuối cùng có thể bao gồm một màu nền.

Vì vậy, khi một người làm:

background: red;

Anh ta đang đặt màu nền thành màu đỏ vì màu đỏ là giá trị cuối cùng được liệt kê.

Khi một người làm:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Màu đỏ là màu nền một lần nữa NHƯNG bạn sẽ thấy một gradient.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Bây giờ điều tương tự với màu nền:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

Lý do điều này xảy ra là vì khi chúng ta đang làm điều này:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Số cuối cùng đặt màu nền.

Sau đó, trước khi chúng ta kế thừa từ nền (sau đó chúng ta có được độ dốc) hoặc màu nền, sau đó chúng ta có màu đỏ.

Một điều tôi nhận thấy rằng tôi không thấy trong tài liệu đang sử dụng background: url("image.png")

tay ngắn như trên nếu không tìm thấy hình ảnh, nó sẽ gửi mã 302 thay vì bị bỏ qua như khi bạn sử dụng

background-image: url("image.png") 

Có một lỗi liên quan đến nền và màu nền

sự khác biệt của điều này, khi sử dụng nền, đôi khi khi bạn tạo một trang web trong nền CSS: #fff // có thể vượt qua một khối hình ảnh Mặt nạ ("mục trên, văn bản hoặc hình ảnh") để tốt hơn là luôn luôn sử dụng nền- màu sắc để sử dụng an toàn, trong thiết kế của bạn nếu cá nhân của nó