ในรหัสของฉันbackground-position-yไม่ทำงาน ใน Chrome ใช้ได้ แต่ใช้ไม่ได้กับ Firefox

ใครมีวิธีแก้ไข

หากตำแหน่ง -x ของคุณเป็น 0 ไม่มีวิธีอื่นใดนอกจากการเขียน:

background-position: 0 100px;

background-position-x เป็นการใช้งานที่ไม่ได้มาตรฐานที่มาจาก IE Chrome ได้คัดลอก แต่น่าเสียดายที่ไม่ใช่ Firefox ...

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

ใช้สิ่งนี้

background: url("path-to-url.png") 89px 78px no-repeat;

แทนที่จะเป็นแบบนี้

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Firefox 49 จะได้รับการปล่อยตัวเมื่อใช้การสนับสนุนสำหรับbackground-position-[xy]-in กันยายน 2016 สำหรับรุ่นเก่าถึง 31 คุณสามารถใช้ตัวแปร CSSเพื่อให้บรรลุการวางตำแหน่งของพื้นหลังบนแกนเดียวคล้ายกับการใช้หรือbackground-position-x background-position-yตัวแปร CSS ถึงสถานะคำแนะนำผู้สมัครในธันวาคม 2015

ต่อไปนี้เป็นตัวอย่างข้ามเบราว์เซอร์ทั้งหมดของการปรับเปลี่ยนแกนตำแหน่งพื้นหลังสำหรับภาพสไปรท์เมื่อวางเมาส์เหนือ:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }

background-position-y :10px;จะไม่ทำงานในเว็บเบราว์เซอร์ Firefox

คุณควรทำตามไวยากรณ์ประเภทนี้:

background-position: 10px 15px;

10px ถูกล้อมรอบกับ "position-x" และ 15px ล้อมรอบ "position-y"

โซลูชันการทำงาน 100%

ติดตามURLนี้เพื่อดูตัวอย่างเพิ่มเติม

ทำไมคุณไม่ใช้ตำแหน่งพื้นหลังโดยตรง

ใช้:

background-position : 40% 56%;

แทน:

background-position-x : 40%;
background-position-y : 56%

background: url("path") 89px 78px no-repeat;

จะไม่ทำงานหากคุณต้องการพื้นหลังพร้อมกับรูปภาพ ดังนั้นใช้:

background: orange url("path-to-image.png") 89px 78px no-repeat;

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

a {
    background-image: url(/image.jpg);
    width: 228px;
    height: 78px;
    display: inline-block;
}

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}

ตรวจสอบให้แน่ใจว่าคุณระบุการวัดออฟเซ็ตของคุณอย่างชัดเจน วันนี้ฉันเจอปัญหานี้แน่นอนและเป็นเพราะเบราว์เซอร์ตีความค่าที่คุณระบุใน CSS ของคุณอย่างไร

ตัวอย่างเช่นสิ่งนี้ทำงานได้อย่างสมบูรณ์ใน Chrome:

background: url("my-image.png") 100 100 no-repeat;

แต่สำหรับ Firefox และ IE คุณต้องเขียน:

background: url("my-image.png") 100px 100px no-repeat;

หวังว่านี่จะช่วยได้

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

เหมืองมีปัญหาแน่นอนตามที่Orabîgระบุไว้ซึ่งมีตารางเหมือนสไปรท์ซึ่งมีคอลัมน์และแถว

ด้านล่างนี้คือสิ่งที่ฉันใช้เป็นวิธีแก้ปัญหาโดยใช้ js

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}