Đặt hình nền 1em từ bên phải?

Question

Theo như tôi có thể nói, không thể đặt hình nền CSS 1em từ đường viền phải của bất kỳ khối nào, không thể đặt hình ảnh 1em từ dưới cùng.

Đoạn mã sau đặt hình nền 1em từ bên trái và 2em từ trên cùng.

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em"> 
    Some text here 
</div> 

Có cách nào trong CSS để chỉ định hình nền nên "ở xa cạnh phải" nếu kích thước của hộp là động và giả sử bạn không thể thay đổi HTML?

(Tỷ lệ phần trăm sẽ không làm việc, kể từ khi hộp có thể thay đổi kích thước)

Nếu đây là không thể, số tiền nhỏ nhất của sự thay đổi bạn cần phải thực hiện với HTML là gì?

Đây là workaround tôi đã đưa ra:

<style> 
div.background 
{ 
    float: right; 
    background: url('bar.png') no-repeat top left; 
    margin-right: 1em; 
    width: 16px; 
    height: 16px; 
} 
</style> 
<div class="foo"> 
    <div class="background" style="">&nbsp;</div> 
    Some text here 
</div> 

Answer 1

Sau khi một số nghiên cứu chiều dài x điểm ảnh thực tế của vị trí nền là luôn tính từ phía bên trái của phần tử. Cách duy nhất để làm cho công việc này (mà không sử dụng các yếu tố khác) sẽ được sử dụng javascript, tính toán chiều dài còn lại được các yếu tố chiều rộng:

var rightMargin = "10"; // in pixels 
var imageWidth = "16"; 
var left = element.style.clientWidth - imageWidth - rightMargin; 

element.style.backgroundPosition = "0px " + left + "px"; 

Answer 2

Bạn có thể thử một cái gì đó như thế này:

<style type="text/css" media="screen"> 
    #outer { 
     position: relative; 
     top: -1em; 
     left: -1em; 
     margin: 1em 0 0 1em; 
     outline: thin solid #F00; 
     background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%; 
    } 
    #inner { 
     outline: thin solid #0F0; 
     position: relative; 
     top: 1em; 
     left: 1em; 
    } 
</style> 

<div id="outer"> 
    <div id="inner"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

Chỉnh sửa: Rất mong nhận được CSS 3 background-position.

Answer 3

Các phần tử có vị trí: tuyệt đối; có thể được định vị bởi cạnh phải của chúng. Vì vậy, nếu bạn không nhớ một sự thay đổi nhỏ cho html, làm điều này:

<div id="the-box"> 
    <img id="the-box-bg" src="bar.png" /> 
    Text text text text.... 
</div> 
(...) 
#the-box { 
    position: relative; 
} 
#the-box-bg { 
    position: absolute; 
    right: 1em; 
    z-index: -1; 
} 

Bạn có thể dĩ nhiên cũng sử dụng định vị tuyệt đối của một div thứ hai, với một nền lặp lại. Nhưng sau đó bạn sẽ phải thiết lập kích thước của div bên trong (inner) trong CSS.

Answer 4

CSS3 background-position spec cho phép bạn thay đổi điểm neo từ trên cùng bên trái thành bất kỳ thứ gì bạn muốn. Ví dụ, sau đây sẽ thiết lập các góc dưới bên dưới của 1em hình ảnh từ bên phải và 2px từ dưới lên:

background-position: right 1em bottom 2px; 

Xác nhận làm việc tại:

IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

Tính đến tháng 4 năm 2013, chỉ có IE6-8 và một số trình duyệt không hỗ trợ.

Dưới đây là một trang thử nghiệm: http://jsbin.com/osojuz/1/edit