Định vị ảnh nền CSS x pixel từ bên phải?

Tôi nghĩ rằng câu trả lời là không, nhưng bạn có thể định vị một hình ảnh nền bằng CSS, để nó là một lượng pixel cố định ở bên phải không?

Nếu tôi đặt background-positiongiá trị của x và y, có vẻ như chúng chỉ cung cấp các điều chỉnh pixel cố định từ bên trái và trên cùng.

background-position: right 30px center;

Nó hoạt động trong hầu hết các trình duyệt. Xem: http://caniuse.com/#feat=css-background-offsets để biết danh sách đầy đủ.

Thêm thông tin: http://www.w3.org/TR/css3-background/#the-background-poseition

Có thể sử dụng thuộc tính borderlà độ dài từ bên phải

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

Có một cách nhưng nó không được hỗ trợ trên mọi trình duyệt (xem phạm vi bảo hiểm tại đây )

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

Nó hoạt động trong mọi trình duyệt hiện đại , nhưng có thể IE9 đang gặp sự cố . Cũng không có bảo hiểm cho = <IE8.

Theo như tôi biết, đặc tả CSS không cung cấp chính xác những gì bạn yêu cầu, ngoài các biểu thức CSS, tất nhiên. Dựa trên giả định rằng bạn không muốn sử dụng biểu thức hoặc Javascript, tôi thấy ba giải pháp hackish:

• Đảm bảo hình nền của bạn khớp với kích thước của thùng chứa (ít nhất là về chiều rộng) và đặt background-repeat: repeathoặc repeat-xnếu chỉ có chiều rộng được cân bằng. Sau đó, có một cái gì đó xuất hiện xpixel từ bên phải là đơn giản như background-position: -5px 0px.
• Sử dụng tỷ lệ phần trăm cho background-positioncác hành vi đặc biệt được nhìn thấy tốt hơn so với mô tả ở đây. Cho nó một shot. Về cơ bản, background-position: 90% 50%sẽ làm cho cạnh phải của dòng ảnh nền tăng 10% so với cạnh phải của container.
• Tạo một div chứa hình ảnh. Đặt hoàn toàn vị trí của phần tử chứa position: relativenếu chưa được đặt. Đặt bộ chứa hình ảnh thành position: absolute; right: 10px; top: 10px;, rõ ràng điều chỉnh hai cái cuối cùng khi bạn thấy phù hợp. Đặt thùng chứa hình ảnh div vào thành phần chứa.

Thử cái này:

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

Lưu ý rằng mã ở trên sẽ di chuyển toàn bộ thành phần (không chỉ hình nền) 5px từ bên phải. Điều này có thể ổn cho trường hợp của bạn.

Bạn có thể làm điều đó trong CSS3:

background-position: right 20px bottom 20px;

Nó hoạt động trong Firefox, Chrome, IE9 +

Nguồn: MDN

Giải pháp thay thế hình ảnh với các pixel trong suốt ở bên phải để phục vụ như lề phải.

Cách giải quyết hình ảnh tương tự là tạo một hình ảnh PNG hoặc GIF (định dạng tệp hình ảnh hỗ trợ độ trong suốt) có phần trong suốt ở bên phải của hình ảnh chính xác bằng số pixel mà bạn muốn đặt lề phải ( ví dụ: 5px, 10px, v.v.)

Điều này hoạt động tốt nhất quán trên các chiều rộng cố định cũng như chiều rộng theo tỷ lệ phần trăm. Thực tế là một giải pháp tốt cho các tiêu đề accordion có hình ảnh mũi tên cộng / trừ hoặc lên / xuống ở bên phải của tiêu đề!

Nhược điểm: Thật không may, bạn không thể sử dụng JPG trừ khi phần nền của vùng chứa và màu nền của hình nền CSS có cùng màu phẳng (không có gradient / họa tiết), chủ yếu là màu trắng / đen, v.v.

Nếu bạn tình cờ vấp phải chủ đề này trong những ngày này của các trình duyệt hiện đại, bạn có thể sử dụng lớp giả: sau để thực hiện bất cứ điều gì thực tế với nền.

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

css này sẽ đặt nền ở góc dưới bên phải của phần tử ".container" với không gian 20px ở bên phải.

Xem fiddle này ví dụ http://jsfiddle.net/h6K9z/226/

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

Chỉ cần đặt phần đệm pixel vào hình ảnh - thêm 10px hoặc bất cứ thứ gì vào kích thước canvas của hình ảnh trong photohop và căn chỉnh nó ngay trong CSS.

Tôi đã cố gắng thực hiện một nhiệm vụ tương tự để có được một mũi tên thả xuống luôn ở bên phải của tiêu đề bảng và đưa ra cái này có vẻ hoạt động trong Chrome và Firefox, nhưng safari đã nói với tôi rằng đó là một thuộc tính không hợp lệ.

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

Sau khi làm một chút lộn xộn trong thanh tra, tôi đã tìm ra giải pháp trình duyệt chéo này hoạt động trong IE8 +, Chrome, Firefox và Safari, cũng như các thiết kế đáp ứng.

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

Đây là một bản mã về cách nó trông và hoạt động. Codepen được viết bằng SCSS - http://cdpn.io/xqGbk

Nếu bạn muốn chỉ định trục x, bạn có thể làm như sau:

background-position-x: right 100px;

Một giải pháp khác tôi chưa thấy đề cập là sử dụng các yếu tố giả và tôi tin rằng giải pháp này sẽ hoạt động với bất kỳ trình duyệt tuân thủ CSS 2.1 nào (≥ IE8, ≥ Safari 2, ...) và nó cũng phải đáp ứng:

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

Ví dụ : Phần tử vd. một hình vuông có kích thước 100px (không xem xét các đường viền) có phần đệm 10px và hình nền sẽ được hiển thị bên trong phần đệm bên phải. Điều này có nghĩa là phần tử giả là một hình vuông có kích thước 80px. Chúng tôi muốn dán nó vào viền bên phải của phần tử với bên phải: -10px; . Nếu chúng ta muốn có hình nền cách xa 5px so với viền bên phải, chúng ta cần dán phần tử giả 5px cách viền bên phải của phần tử với bên phải: -5px; ... Tự kiểm tra nó tại đây: http://jsfiddle.net/yHucT/

Nếu container có chiều cao cố định: Tăng gấp đôi tỷ lệ phần trăm (vị trí nền) cho đến khi nó khớp chính xác.

Nếu container có chiều cao động: Nếu bạn muốn có phần đệm giữa nền và vùng chứa của bạn (chẳng hạn như khi nhập kiểu dáng tùy chỉnh, chọn), hãy thêm phần đệm vào hình ảnh của bạn và đặt vị trí nền thành bên phải hoặc dưới cùng.

Tôi vấp phải câu hỏi này trong khi tôi đang cố gắng lấy nền cho hộp chọn để phù hợp với 5 px từ bên phải của lựa chọn của tôi. Trong trường hợp của tôi, nền của tôi là một mũi tên xuống sẽ thay thế biểu tượng thả xuống cơ bản. Trong trường hợp của tôi, phần đệm sẽ luôn giữ nguyên (5-10 pixel từ bên phải) cho nền, do đó, đây là một sửa đổi dễ dàng để đưa vào hình nền thực tế (làm cho kích thước của nó rộng hơn 5-10 pixel ở bên phải.

Hi vọng điêu nay co ich!

Bạn có thể định vị ảnh nền của mình trong trình chỉnh sửa thành x pixel từ phía bên phải.

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

Hình nền sẽ được định vị ở trên cùng bên phải, nhưng sẽ xuất hiện là x pixel từ bên phải.

Tinh chỉnh tỷ lệ phần trăm từ bên trái là một chút giòn cho sở thích của tôi. Khi tôi cần một cái gì đó như thế này, tôi có xu hướng thêm kiểu dáng container của mình vào phần tử trình bao bọc và sau đó áp dụng nền cho phần tử bên trong vớibackground-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>

Các .content-breakoutlớp là không bắt buộc và sẽ cho phép nội dung của bạn để ăn vào đệm nếu có yêu cầu (giá trị lợi nhuận tiêu cực phải phù hợp với các giá trị tương ứng trong đệm wrapper). Đó là một chút dài dòng, nhưng hoạt động đáng tin cậy mà không cần phải quan tâm đến vị trí tương đối của hình ảnh so với chiều rộng và chiều cao của nó.

Đó là loong vì câu hỏi này đã được hỏi, nhưng tôi chỉ gặp vấn đề này và tôi đã nhận được nó bằng cách làm:

background-position:95% 50%;

Giải pháp cho các giá trị âm. Điều chỉnh phần đệm bên phải để di chuyển hình ảnh.

<div style='overflow:hidden;'>

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

    </div>

</div>

Điều này hoạt động trong Chrome 27, tôi không biết liệu nó có hợp lệ hay không hoặc những người làm lông mày khác làm gì với nó. Tôi đã ngạc nhiên về điều này.

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

Hoạt động cho tất cả các trình duyệt thực (và cho IE9 +):

background-position: right 10px top 10px;

Tôi sử dụng nó để chủ đề RTL WordPress. Xem ví dụ: trang web tạm thời hoặc trang web thực sự sẽ sớm lên. Nhìn vào các biểu tượng ở các góc phải của DIV lớn.

Tốt hơn cho tất cả nền: url ('../ hình ảnh / bg-menu-dropdown-top.png') còn lại 20px trên cùng không lặp lại! Quan trọng;