ฉันกำลังพยายามผสมbackground-imageและbackground-sizeคุณสมบัติในbackgroundทรัพย์สินชวเลข ตามเอกสาร W3C background-sizeควรมาหลังจากbackground-positionคุณสมบัติที่คั่นด้วยเครื่องหมายทับ ( /)

ตัวอย่าง W3C:

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

เทียบเท่ากับ:

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พูดในสิ่งเดียวกัน ฉันยังพบนี้และนี้บทความเกี่ยวกับอสังหาริมทรัพย์พื้นหลังจดชวเลข CSS3 อธิบายนี้

แต่ไม่ได้ผล! นอกจากนี้ยังไม่ชัดเจนว่าจะทำให้การจดชวเลขbackgroundคุณสมบัติเมื่อbackground-sizeและbackground-positionมีสองค่าที่แตกต่างกันสำหรับการbackground-position-xและหรือสิ่งเดียวกันสำหรับbackground-position-y background-sizeยังไม่ชัดเจนว่าเครื่องหมายทับ ( /) เกิดขึ้นได้อย่างไร? ตัวอย่างนี้ใช้ไม่ได้ใน Chrome 15 ของฉัน

ตัวอย่างที่ฉันพยายามสร้างชวเลขคือโค้ด CSS นี้:

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;  
}

ตัวอย่างที่สะอาดกว่า

ใช้งานได้ ( 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;
    }

สิ่งนี้ไม่ทำงาน ( jsfiddle )

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

สิ่งนี้ใช้ไม่ได้เช่นกัน ( jsfiddle )

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

1. jsfiddle ของคุณใช้background-imageแทนbackground
2. ดูเหมือนว่าจะ "ยังไม่รองรับเบราว์เซอร์นี้"

ใช้งานได้ใน Opera: http://jsfiddle.net/ZNsbU/5/
แต่ใช้ไม่ได้ใน FF5 หรือ IE8 (ใช่สำหรับเบราว์เซอร์ที่ล้าสมัย: D)

รหัส:

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

คุณสามารถทำได้ดังนี้:

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

ซึ่งใช้งานได้ใน FF5 และ Opera แต่ไม่ใช่ใน IE8

คุณสามารถทำเช่น

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

เพียงหมายเหตุสำหรับการอ้างอิง: ฉันพยายามทำชวเลขดังนี้:

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

แต่เบราว์เซอร์ Safari ของ iPhone ไม่แสดงภาพอย่างถูกต้องด้วยองค์ประกอบตำแหน่งคงที่ ฉันไม่ได้ตรวจสอบแบบไม่กำหนดเพราะฉันขี้เกียจ ผมต้องสลับ CSS กับสิ่งที่เป็นด้านล่างมีการระมัดระวังในการวางพื้นหลังขนาดหลังจากคุณสมบัติพื้นหลัง หากคุณทำในสิ่งที่ตรงกันข้ามพื้นหลังจะเปลี่ยนขนาดพื้นหลังเป็นขนาดดั้งเดิมของภาพ โดยทั่วไปแล้วฉันจะหลีกเลี่ยงการใช้ชวเลขเพื่อกำหนดขนาดพื้นหลัง

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

ลองแบบนี้

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


/* 100px is the background size */

คุณจะต้องใช้คำนำหน้าผู้ขายเพื่อรองรับเบราว์เซอร์ที่แตกต่างกันดังนั้นจึงไม่สามารถใช้ในการชวเลขได้

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;
}