Tôi đang cố gắng để trộn background-imagevà background-sizebất động sản tại một neo backgroundbất động sản. Dựa trên tài liệu W3C background-size sẽ xuất hiện sau thuộc background-positiontính được phân tách bằng dấu gạch chéo ( /).

Ví dụ về W3C:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

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

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

MDN cũng nói như vậy. Tôi cũng thấy này và đây bài viết về sở hữu nền viết tắt CSS3 giải thích này.

Nhưng điều này không hoạt động! Nó cũng không rõ ràng làm thế nào để tạo một thuộc tính tốc ký backgroundkhi background-sizevà background-positioncó hai giá trị khác nhau cho background-position-xvà background-position-yhoặc cùng một thứ cho background-size. Không rõ dấu gạch chéo ( /) diễn ra như thế nào? Ví dụ này không hoạt động trong Chrome 15 của tôi.

Ví dụ tôi đã thử viết tắt là mã CSS này:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

Một ví dụ rõ ràng hơn

Điều này đang hoạt động ( JSFiddle )

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

Điều này không hoạt động ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

Điều này cũng không hoạt động ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

1. Jsfiddle của bạn sử dụng background-imagethay vìbackground
2. Nó dường như là một trường hợp "chưa được hỗ trợ bởi trình duyệt này".

Điều này hoạt động trong Opera: http://jsfiddle.net/ZNsbU/5/
Nhưng nó không hoạt động trong FF5 cũng như IE8. (yay cho các trình duyệt lỗi thời: D)

Mã:

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

Bạn có thể làm như thế này:

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

Hoạt động trong FF5 và Opera nhưng không hoạt động trong IE8.

Bạn có thể làm như

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

Chỉ là một ghi chú để tham khảo: Tôi đã cố gắng viết tốc ký như vậy:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

nhưng trình duyệt Safari của iPhone không hiển thị hình ảnh chính xác với phần tử vị trí cố định. Tôi đã không kiểm tra với một không cố định, bởi vì tôi lười biếng. Tôi phải chuyển css sang những gì bên dưới, cẩn thận đặt kích thước nền sau thuộc tính nền. Nếu bạn làm ngược lại, nền sẽ hoàn nguyên kích thước nền về kích thước ban đầu của hình ảnh. Vì vậy, nói chung tôi sẽ tránh sử dụng cách viết tắt để đặt kích thước nền.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

thử như thế này

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

Bạn sẽ phải sử dụng tiền tố của nhà cung cấp để hỗ trợ các trình duyệt khác nhau và do đó không thể sử dụng nó theo cách viết tắt.

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}