วางตำแหน่งรูปภาพพื้นหลัง CSS x พิกเซลจากด้านขวาหรือไม่

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

ถ้าฉันตั้งbackground-positionค่าของ x และ y ดูเหมือนว่าเหล่านั้นจะให้การปรับพิกเซลคงที่จากด้านซ้ายและด้านบนตามลำดับเท่านั้น

background-position: right 30px center;

มันทำงานได้ในเบราว์เซอร์ส่วนใหญ่ ดู: http://caniuse.com/#feat=css-background-offsetsสำหรับรายการทั้งหมด

ข้อมูลเพิ่มเติม: http://www.w3.org/TR/css3-background/#the-background-position

เป็นไปได้ที่จะใช้คุณลักษณะborderเป็นความยาวจากด้านขวา

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

มีวิธีเดียว แต่ไม่รองรับทุกเบราว์เซอร์ (ดูความคุ้มครองที่นี่ )

element {
  background-position : calc(100% - 10px) 0;
}

มันทำงานได้ในทุกที่ทันสมัยเบราว์เซอร์, แต่มันก็เป็นไปได้ว่า IE9 เป็น crashing ยังไม่มีการครอบคลุมสำหรับ = <IE8

เท่าที่ฉันรู้CSS สเปคไม่ได้ให้สิ่งที่คุณขอแน่นอนนอก CSS นิพจน์แน่นอน จากข้อสมมติฐานที่ว่าคุณไม่ต้องการใช้นิพจน์หรือ Javascript ฉันเห็นโซลูชันแฮ็กสามตัว:

• ตรวจสอบให้แน่ใจว่าภาพพื้นหลังของคุณตรงกับขนาดของคอนเทนเนอร์ (อย่างน้อยก็ในความกว้าง) และตั้งค่าbackground-repeat: repeatหรือrepeat-xถ้าความกว้างเท่ากันเท่านั้น จากนั้นการมีบางสิ่งที่ปรากฏxพิกเซลจากด้านขวานั้นง่ายเหมือนbackground-position: -5px 0pxพิกเซลจากด้านขวาเป็นง่ายๆเป็น
• การใช้เปอร์เซ็นต์สำหรับการbackground-positionจัดแสดงพฤติกรรมพิเศษที่เห็นได้ดีกว่าที่อธิบายไว้ที่นี่ ลองยิงดู โดยพื้นฐานแล้วbackground-position: 90% 50%จะทำให้ขอบด้านขวาของภาพพื้นหลังเรียงกัน 10% จากขอบด้านขวาของคอนเทนเนอร์
• สร้าง div ที่มีภาพ กำหนดตำแหน่งขององค์ประกอบที่มีอย่างชัดเจนposition: relativeหากยังไม่ได้ตั้งค่า ตั้งค่าคอนเทนเนอร์รูปภาพเป็นposition: absolute; right: 10px; top: 10px;ปรับสองขั้นสุดท้ายตามที่เห็นสมควร วางคอนเทนเนอร์ div ของรูปภาพไว้ในองค์ประกอบที่มี

ลองสิ่งนี้:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

โปรดทราบว่ารหัสด้านบนจะย้ายองค์ประกอบทั้งหมด (ไม่ใช่ภาพพื้นหลังเท่านั้น) 5px จากด้านขวา นี่อาจจะโอเคสำหรับกรณีของคุณ

คุณสามารถทำได้ใน CSS3:

background-position: right 20px bottom 20px;

มันทำงานได้ใน Firefox, Chrome, IE9 +

ที่มา: MDN

การแก้ปัญหาภาพด้วยพิกเซลโปร่งใสทางด้านขวาเพื่อใช้เป็นระยะขอบขวา

วิธีแก้ปัญหาสำหรับรูปภาพแบบเดียวกันคือการสร้างภาพ PNG หรือ GIF (รูปแบบไฟล์ภาพที่สนับสนุนความโปร่งใส) ซึ่งมีส่วนที่โปร่งใสทางด้านขวาของภาพเท่ากับจำนวนพิกเซลที่คุณต้องการให้ระยะขอบด้านขวาของ ( เช่น: 5px, 10px เป็นต้น)

วิธีนี้ใช้ได้ดีกับความกว้างคงที่ตลอดจนความกว้างเป็นเปอร์เซ็นต์ เป็นวิธีแก้ปัญหาที่ดีสำหรับส่วนหัวของหีบเพลงที่มีรูปลูกศรบวก / ลบหรือลูกศรขึ้น / ลงทางด้านขวาของส่วนหัว!

ข้อเสีย: น่าเสียดายที่คุณไม่สามารถใช้ JPG ได้เว้นแต่ว่าส่วนพื้นหลังของคอนเทนเนอร์และสีพื้นหลังของภาพพื้นหลัง CSS มีสีเดียว (โดยไม่มีการไล่ระดับสี / บทความสั้น) ส่วนใหญ่เป็นสีขาว / ดำเป็นต้น

หากคุณบังเอิญพบหัวข้อนี้ในเบราว์เซอร์สมัยใหม่คุณสามารถใช้ pseudo-class: หลังจากทำสิ่งที่เป็นประโยชน์กับพื้นหลัง

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

css นี้จะใส่พื้นหลังไปที่มุมล่างขวาขององค์ประกอบ ".container" พร้อมช่องว่าง 20px ทางด้านขวา

ดูซอนี้เช่นhttp://jsfiddle.net/h6K9z/226/

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

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+ */

เพียงแค่ใส่พิกเซล padding ลงในภาพ - เพิ่ม 10px หรืออะไรก็ตามที่มีขนาดผ้าใบของรูปภาพใน photohop และจัดแนวให้ถูกต้องใน CSS

ฉันพยายามทำสิ่งที่คล้ายกันเพื่อให้ได้ลูกศรดรอปดาวน์ที่ด้านขวาของส่วนหัวของตารางเสมอและเกิดสิ่งนี้ซึ่งดูเหมือนว่าจะทำงานใน Chrome และ Firefox แต่ซาฟารีบอกฉันว่ามันเป็นคุณสมบัติที่ไม่ถูกต้อง

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

หลังจากทำสิ่งที่ยุ่งเหยิงในผู้ตรวจสอบฉันมากับโซลูชันข้ามเบราว์เซอร์ที่ทำงานใน IE8 +, Chrome, Firefox และ Safari รวมถึงการออกแบบที่ตอบสนอง

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

นี่คือ codepen ของลักษณะและการทำงาน Codepen เขียนด้วย SCSS - http://cdpn.io/xqGbk

หากคุณต้องการระบุเฉพาะแกน x คุณสามารถทำสิ่งต่อไปนี้:

background-position-x: right 100px;

อีกวิธีที่ฉันไม่ได้กล่าวถึงคือการใช้องค์ประกอบเทียมและฉันเชื่อว่าวิธีนี้จะทำงานกับเบราว์เซอร์ที่รองรับ CSS 2.1 (เช่น IE8, ≥ Safari 2, ... ) และควรตอบสนองต่อ:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

ตัวอย่าง : องค์ประกอบเช่น สี่เหลี่ยมจัตุรัสขนาด 100px (โดยไม่พิจารณาเส้นขอบ) มีช่องว่างภายใน 10px และควรแสดงภาพพื้นหลังภายในช่องว่างด้านขวา ซึ่งหมายความว่าองค์ประกอบหลอกเป็นสี่เหลี่ยมจตุรัสขนาด 80px เราต้องการติดกับขอบด้านขวาขององค์ประกอบด้วยขวา: -10px; . หากเราต้องการให้ภาพพื้นหลังอยู่ห่างจากขอบด้านขวา 5px เราจำเป็นต้องติดหลอกองค์ประกอบ 5px ให้ห่างจากขอบด้านขวาขององค์ประกอบด้วยขวา: -5px; ... ทดสอบด้วยตนเองที่นี่: http://jsfiddle.net/yHucT/

หากคอนเทนเนอร์มีความสูงคงที่: ให้ลองหาอัตราร้อยละ (ตำแหน่งพื้นหลัง) จนกระทั่งพอดี

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

ฉันสะดุดกับคำถามนี้ในขณะที่ฉันพยายามรับพื้นหลังสำหรับกล่องที่เลือกเพื่อให้พอดีกับพูด 5 px จากด้านขวาของการเลือกของฉัน ในกรณีของฉันพื้นหลังของฉันเป็นลูกศรลงซึ่งจะแทนที่ไอคอนดรอปดาวน์พื้นฐาน ในกรณีของฉันการขยายจะยังคงเหมือนเดิม (5-10 พิกเซลจากด้านขวา) สำหรับพื้นหลังเสมอดังนั้นจึงเป็นการปรับเปลี่ยนได้ง่ายเพื่อนำไปสู่ภาพพื้นหลังจริง (ทำให้มีขนาดกว้างขึ้น 5-10 พิกเซลทางด้านขวา

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

คุณสามารถวางตำแหน่งภาพพื้นหลังของคุณในโปรแกรมแก้ไขให้เป็น x พิกเซลจากด้านขวา

background: url(images_url) no-repeat right top;

ภาพพื้นหลังจะอยู่ในตำแหน่งด้านบนขวา แต่จะปรากฏเป็น x พิกเซลจากด้านขวา

ร้อยละ Tweaking จากด้านซ้ายจะเปราะเล็กน้อยสำหรับความชอบของฉัน เมื่อฉันต้องการอะไรเช่นนี้ฉันมักจะเพิ่มสไตล์การจัดเก็บตู้คอนเทนเนอร์ของคุณไปที่องค์ประกอบของเสื้อคลุมแล้วใช้พื้นหลังกับองค์ประกอบภายในด้วยbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

.content-breakoutระดับเป็นตัวเลือกและจะช่วยให้เนื้อหาของคุณจะกินเข้าไปในช่องว่างภายในถ้าจำเป็น (ค่าขอบเชิงลบควรจะตรงกับค่าที่สอดคล้องกันในการขยายเสื้อคลุม) มัน verbose เล็กน้อย แต่ทำงานได้อย่างน่าเชื่อถือโดยไม่ต้องกังวลเกี่ยวกับการวางตำแหน่งสัมพัทธ์ของภาพเมื่อเทียบกับความกว้างและความสูง

มันค่อนข้างนานตั้งแต่มีการถามคำถามนี้ แต่ฉันเพิ่งพบปัญหานี้และฉันได้โดยทำ:

background-position:95% 50%;

คำตอบสำหรับค่าลบ ปรับ padding-right เพื่อเลื่อนภาพ

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

สิ่งนี้ใช้ได้ใน Chrome 27 ฉันไม่รู้ว่ามันใช้งานได้จริงหรือไม่ ฉันรู้สึกประหลาดใจเกี่ยวกับเรื่องนี้

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

ใช้งานได้กับเบราว์เซอร์จริงทั้งหมด (และสำหรับ IE9 +):

background-position: right 10px top 10px;

ฉันใช้ธีม RTL WordPress ดูตัวอย่าง: เว็บไซต์ชั่วคราวหรือเว็บไซต์จริงจะเปิดตัวเร็ว ๆ นี้ ดูไอคอนที่มุมขวาของ DIV ขนาดใหญ่

ดีกว่าสำหรับพื้นหลังทั้งหมด: url ('../ images / bg-menu-dropdown-top.png') เหลือ 20px ด้านบนไม่ทำซ้ำสำคัญ!