ชดเชยภาพพื้นหลังจากด้านขวาโดยใช้ CSS

มีวิธีวางตำแหน่งภาพพื้นหลังในจำนวนพิกเซลจากด้านขวาขององค์ประกอบหรือไม่?

ตัวอย่างเช่นหากต้องการวางตำแหน่งบางสิ่งบางอย่างจำนวนพิกเซล (พูด, 10) จากด้านซ้ายนี่คือวิธีที่ฉันทำ:

#myElement {
    background-position: 10px 0;
}

ฉันพบคุณสมบัติ CSS3 นี้มีประโยชน์:

/* to position the element 10px from the right */
background-position: right 10px top;

เท่าที่ฉันรู้ว่าสิ่งนี้ไม่ได้รับการสนับสนุนใน IE8 ใน Chrome / Firefox ล่าสุดทำงานได้ดี

ดูฉันสามารถใช้รายละเอียดเกี่ยวกับเบราว์เซอร์ที่รองรับได้หรือไม่

แหล่งที่ใช้แล้ว: http://tanalin.com/en/blog/2011/09/css3-background-position/

อัปเดต :

ขณะนี้ฟีเจอร์นี้รองรับเบราว์เซอร์หลักทั้งหมดรวมถึงเบราว์เซอร์มือถือ

!! คำตอบที่ล้าสมัยเนื่องจากCSS3 นำคุณลักษณะนี้มา

มีวิธีวางตำแหน่งภาพพื้นหลังในจำนวนพิกเซลจากด้านขวาขององค์ประกอบหรือไม่?

Nope

วิธีแก้ปัญหายอดนิยม ได้แก่

• การตั้งค่าmargin-rightบนองค์ประกอบแทน
• เพิ่มพิกเซลโปร่งใสให้กับภาพและวางตำแหน่ง top right
• หรือคำนวณตำแหน่งโดยใช้ jQuery หลังจากทราบความกว้างขององค์ประกอบ

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

รหัส:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

คำตอบที่ล้าสมัย: ขณะนี้มีการใช้งานในเบราว์เซอร์หลักดูคำตอบอื่น ๆ สำหรับคำถามนี้

CSS3 ได้แก้ไขสเปคของbackground-positionมันเพื่อที่จะทำงานกับจุดกำเนิดที่แตกต่างกัน น่าเสียดายที่ฉันไม่พบหลักฐานใด ๆ ที่นำไปใช้กับเบราว์เซอร์หลัก ๆ

http://www.w3.org/TR/css3-background/#the-background-position ดูตัวอย่างที่ 12

background-position: right 3em bottom 10px;

ตามที่เสนอไว้ที่นี่นี่เป็นโซลูชันเบราว์เซอร์ข้ามที่ใช้งานได้อย่างสมบูรณ์แบบ:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

ฉันใช้มันตั้งแต่คุณสมบัติ CSS3 ในการระบุการชดเชยที่เสนอในคำตอบที่ทำเครื่องหมายว่าแก้ปัญหายังไม่ได้รับการสนับสนุนในเบราว์เซอร์ เช่น

คำตอบที่เหมาะสมที่สุดคือไวยากรณ์สี่ค่าใหม่สำหรับพื้นหลังตำแหน่ง แต่จนทุกเบราว์เซอร์สนับสนุนวิธีที่ดีที่สุดของคุณคือการรวมกันของการตอบสนองก่อนหน้านี้ในลำดับต่อไปนี้:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

เคล็ดลับที่เรียบง่าย แต่สกปรกคือการเพิ่มออฟเซ็ตที่คุณต้องการให้กับรูปภาพที่คุณใช้เป็นพื้นหลัง มันไม่สามารถบำรุงรักษาได้ แต่ทำให้งานเสร็จ

นี้จะทำงานบนมากที่สุดเบราว์เซอร์ที่ทันสมัย ... นอกเหนือจาก IE (สนับสนุนเบราว์เซอร์) แม้ว่าหน้านั้นจะแสดงรายการ> = IE9 ตามที่รองรับการทดสอบของฉันไม่เห็นด้วย

คุณสามารถใช้คุณสมบัติ calc () css3 ได้

.class_name {
    background-position: calc(100% - 10px) 50%;
}

สำหรับฉันนี่เป็นวิธีที่สะอาดและสมเหตุสมผลที่สุดเพื่อให้ได้มาร์จิ้นไปทางขวา ฉันยังใช้ทางเลือกในการใช้border-right: 10px solid transparent;งาน IE

ตกลงถ้าฉันเข้าใจสิ่งที่คุณถามคุณจะทำเช่นนี้;

คุณมีคอนเทนเนอร์ DIV ของคุณถูกเรียก#main-containerและ.my-elementอยู่ในนั้น ใช้สิ่งนี้เพื่อให้คุณเริ่มต้น;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

โดยวิธีการที่ดีกว่าการใช้คลาสถ้าคุณอ้างถึงองค์ประกอบระดับต่ำกว่าในหน้า (ฉันคิดว่าคุณจึงเปลี่ยนชื่อของฉันข้างต้น

ข้อมูลจำเพาะ CSS3 ที่อนุญาตให้ต้นกำเนิดที่แตกต่างกันสำหรับตำแหน่งพื้นหลังได้รับการสนับสนุนใน Firefox 14 แต่ยังไม่ได้อยู่ใน Chrome 21 (เห็นได้ชัดว่า IE9 สนับสนุนบางส่วน แต่ฉันไม่ได้ทดสอบด้วยตนเอง)

นอกเหนือจากปัญหาของ Chrome ที่ @MattyF อ้างถึงแล้วยังมีบทสรุปที่กระชับมากขึ้นที่นี่: http://code.google.com/p/chromium/issues/detail?id=95085

หากคุณมีองค์ประกอบตามสัดส่วนคุณสามารถใช้:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

ในตัวอย่างนี้.validจะเป็นคลาสที่มีรูปภาพและ.halfจะเป็นแถวที่มีขนาดครึ่งหนึ่งของขนาดมาตรฐาน

สกปรก แต่ทำงานเป็นเสน่ห์และจัดการได้อย่างสมเหตุสมผล

หากคุณต้องการใช้สิ่งนี้เพื่อเพิ่มลูกศร / ไอคอนอื่น ๆ ลงในปุ่มคุณสามารถใช้องค์ประกอบหลอกหลอก CSS ได้หรือไม่?

หากเป็นภาพพื้นหลังจริง ๆ สำหรับปุ่มทั้งปุ่มฉันมักจะรวมระยะห่างลงในภาพและเพียงแค่ใช้

background-position: right 0;

แต่ถ้าฉันต้องเพิ่มตัวอย่างเช่นลูกศรที่ออกแบบให้กับปุ่มฉันมักจะมี html นี้:

<a href="[url]" class="read-more">Read more</a>

และมักจะทำสิ่งต่อไปนี้ด้วย CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

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

คุณสามารถตรวจสอบซอที่นี่: http://codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

ใช้กึ่งกลางขวาเป็นตำแหน่งจากนั้นเพิ่มเส้นขอบโปร่งใสเพื่อชดเชยหรือไม่

หากคุณมีองค์ประกอบความกว้างคงที่และทราบความกว้างของภาพพื้นหลังของคุณคุณสามารถกำหนดตำแหน่งพื้นหลังเป็น: ความกว้างขององค์ประกอบ - ความกว้างของภาพ - ช่องว่างที่คุณต้องการทางด้านขวา

ตัวอย่างเช่น: ด้วยองค์ประกอบกว้าง 100px และรูปภาพกว้าง 300px เพื่อให้มีช่องว่าง 10px ทางด้านขวาคุณตั้งค่าเป็น 100-300-10 = -210px:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

และคุณได้ภาพที่ถูกต้องที่สุด 80 พิกเซลทางด้านซ้ายขององค์ประกอบและช่องว่าง 20px ทางด้านขวา

ฉันรู้ว่ามันฟังดูงี่เง่า แต่บางครั้งก็ประหยัดเวลา ... ฉันใช้มันในแนวตั้ง (ช่องว่างที่ด้านล่าง) สำหรับลิงก์การนำทางพร้อมข้อความด้านล่างภาพ

ไม่แน่ใจว่ามันใช้กับกรณีของคุณ

ปัญหาของฉันคือฉันต้องการภาพพื้นหลังเพื่อให้อยู่ในระยะห่างจากขอบด้านขวาเมื่อปรับขนาดหน้าต่างเช่นแท็บเล็ต / มือถือ ฯลฯ การแก้ไขของฉันคือการใช้ percenatge ดังนี้:

background-position: 98% 6px;

และมันติดอยู่ในสถานที่

ใช่! ดีที่จะวางตำแหน่งภาพพื้นหลังราวกับว่า 0px จากด้านขวามือของเบราว์เซอร์แทนซ้าย - ฉันใช้:

background-position: 100% 0px;