Bù đắp một hình nền từ bên phải bằng CSS

Có cách nào để định vị hình ảnh nền một số pixel nhất định từ bên phải phần tử của nó không?

Ví dụ: để định vị thứ gì đó một số pixel nhất định (giả sử là 10) từ bên trái , đây là cách tôi thực hiện:

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

Tôi thấy tính năng CSS3 này hữu ích:

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

Theo tôi biết điều này không được hỗ trợ trong IE8. Trong Chrome / Firefox mới nhất, nó hoạt động tốt.

Xem Tôi có thể sử dụng để biết chi tiết về các trình duyệt được hỗ trợ.

Nguồn được sử dụng: http://tanalin.com/en/blog/2011/09/css3-background-poseition/

Cập nhật :

Tính năng này hiện được hỗ trợ trong tất cả các trình duyệt chính, bao gồm cả trình duyệt di động.

!! Câu trả lời lỗi thời, vì CSS3 mang tính năng này

Có cách nào để định vị hình ảnh nền một số pixel nhất định từ bên phải phần tử của nó không?

Không.

Cách giải quyết phổ biến bao gồm

• thiết lập một margin-righttrên phần tử thay vì
• thêm các pixel trong suốt vào chính hình ảnh và định vị nó top right
• hoặc tính toán vị trí bằng jQuery sau khi biết chiều rộng của phần tử.

Giải pháp đơn giản nhất là sử dụng tỷ lệ phần trăm. Đây không phải là câu trả lời chính xác mà bạn đang tìm kiếm vì bạn đã yêu cầu độ chính xác pixel, nhưng nếu bạn chỉ cần một cái gì đó để có một chút đệm giữa cạnh phải và hình ảnh, cho một vị trí 99% thường hoạt động đủ tốt.

Mã số:

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

Câu trả lời lỗi thời: Hiện đã được triển khai trong các trình duyệt chính, hãy xem các câu trả lời khác cho câu hỏi này.

CSS3 đã sửa đổi đặc tả background-positionđể nó sẽ hoạt động với điểm gốc khác nhau. Thật không may, tôi không thể tìm thấy bất kỳ bằng chứng nào cho thấy nó được triển khai trong bất kỳ trình duyệt chính nào.

http://www.w3.org/TR/css3-background/#the-background-poseition Xem ví dụ 12.

background-position: right 3em bottom 10px;

Như đã đề xuất ở đây , đây là một giải pháp trình duyệt chéo khá hoạt động hoàn hảo:

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

Tôi đã sử dụng nó vì tính năng CSS3 trong việc chỉ định các offset được đề xuất trong câu trả lời được đánh dấu là giải quyết câu hỏi chưa được hỗ trợ trong các trình duyệt. Ví dụ

Các câu trả lời thích hợp nhất là cú pháp bốn-giá trị mới cho background-position, nhưng đến khi tất cả các trình duyệt hỗ trợ nó tiếp cận tốt nhất của bạn là sự kết hợp của các phản ứng trước theo thứ tự sau:

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

Một mẹo đơn giản nhưng bẩn thỉu là chỉ cần thêm phần bù bạn muốn vào hình ảnh bạn đang sử dụng làm nền. nó không thể duy trì, nhưng nó hoàn thành công việc.

Điều này sẽ hoạt động trên hầu hết các trình duyệt hiện đại ... ngoài IE (hỗ trợ trình duyệt) . Mặc dù trang đó liệt kê> = IE9 như được hỗ trợ, các thử nghiệm của tôi không đồng ý với điều đó.

Bạn có thể sử dụng thuộc tính calc () css3 như vậy;

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

Đối với tôi đây là cách sạch nhất và hợp lý nhất để đạt được một lề bên phải. Tôi cũng sử dụng một dự phòng sử dụng border-right: 10px solid transparent;cho IE.

Ok Nếu tôi hiểu những gì bạn yêu cầu bạn sẽ làm điều này;

Bạn có container DIV của bạn được gọi #main-containervà .my-elementđó là trong đó. Sử dụng điều này để giúp bạn bắt đầu;

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

Nhân tiện, tốt hơn hết là sử dụng các lớp nếu bạn tham chiếu một yếu tố cấp thấp hơn trong một trang (Tôi giả sử bạn là do đó tên của tôi thay đổi ở trên.

Đặc tả CSS3 cho phép các nguồn gốc khác nhau cho vị trí nền hiện được hỗ trợ trong Firefox 14 nhưng vẫn không có trong Chrome 21 (rõ ràng IE9 hỗ trợ một phần cho chúng, nhưng tôi đã không tự mình kiểm tra)

Ngoài vấn đề về Chrome mà @MattyF đã tham khảo còn có một bản tóm tắt ngắn gọn hơn ở đây: http://code.google.com.vn/p/chromium/issues/detail?id=95085

Nếu bạn có các yếu tố tỷ lệ, bạn có thể sử dụng:

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

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

Trong ví dụ này, .validsẽ là lớp có hình và .halfsẽ là một hàng có kích thước bằng một nửa so với tiêu chuẩn.

Dơ bẩn, nhưng hoạt động như một sự quyến rũ và nó có thể quản lý hợp lý.

Nếu bạn muốn sử dụng cái này để thêm mũi tên / biểu tượng khác vào một nút chẳng hạn thì bạn có thể sử dụng phần tử giả css không?

Nếu đó thực sự là hình nền cho toàn bộ nút, tôi có xu hướng kết hợp khoảng cách vào hình ảnh và chỉ sử dụng

background-position: right 0;

Nhưng nếu tôi phải thêm ví dụ một mũi tên được thiết kế vào một nút, tôi có xu hướng có html này:

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

Và có xu hướng làm như sau với 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;
}

Bằng cách sử dụng: sau bộ chọn, tôi thêm một phần tử bằng CSS chỉ để chứa biểu tượng nhỏ này. Bạn có thể làm tương tự bằng cách chỉ thêm một khoảng hoặc <i>phần tử bên trong phần tử a. Nhưng tôi nghĩ rằng đây là một cách dễ dàng hơn để thêm các biểu tượng vào các nút và nó được hỗ trợ nhiều trình duyệt.

bạn có thể kiểm tra các câu đố ở đây: http://codepen.io/anon/pen/PNzYzZ

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

Sử dụng trung tâm ngay làm vị trí sau đó thêm đường viền trong suốt để bù lại?

Nếu bạn có thành phần chiều rộng cố định và biết chiều rộng của hình nền, bạn có thể chỉ cần đặt vị trí nền thành: chiều rộng của thành phần - chiều rộng của hình ảnh - khoảng cách bạn muốn ở bên phải.

Ví dụ: với phần tử rộng 100px và hình ảnh rộng 300px, để có khoảng cách 10px ở bên phải, bạn đặt nó thành 100-300-10 = -210px:

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

Và bạn nhận được 80 pixel bên phải của hình ảnh bên trái phần tử của bạn và khoảng cách 20px ở bên phải.

Tôi biết nó nghe có vẻ ngu ngốc nhưng đôi khi nó giúp tiết kiệm thời gian ... Tôi sử dụng nó theo cách dọc (khoảng cách ở dưới cùng) cho các liên kết điều hướng với văn bản bên dưới hình ảnh.

Không chắc chắn nó áp dụng cho trường hợp của bạn mặc dù.

vấn đề của tôi là tôi cần hình nền giữ cùng khoảng cách với đường viền bên phải khi cửa sổ được thay đổi kích thước tức là cho máy tính bảng / điện thoại di động, v.v ... Cách khắc phục của tôi là sử dụng một percenatge như vậy:

background-position: 98% 6px;

và nó dính tại chỗ.

Đúng! cũng để định vị hình ảnh nền như 0px từ phía bên phải của trình duyệt thay vì bên trái - tôi sử dụng:

background-position: 100% 0px;