Mengimbangi gambar latar belakang dari kanan menggunakan CSS

Apakah ada cara untuk memposisikan gambar latar sejumlah piksel dari kanan elemennya?

Misalnya, untuk memposisikan sesuatu sejumlah piksel (katakanlah, 10) dari kiri , ini adalah bagaimana saya melakukannya:

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

Saya menemukan fitur CSS3 ini bermanfaat:

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

Sejauh yang saya tahu ini tidak didukung di IE8. Di Chrome / Firefox terbaru berfungsi dengan baik.

Lihat Dapatkah saya menggunakan detail tentang browser yang didukung.

Sumber yang digunakan: http://tanalin.com/en/blog/2011/09/css3-background-position/

Perbarui :

Fitur ini sekarang didukung di semua browser utama, termasuk browser seluler.

!! Jawaban yang ketinggalan zaman, karena CSS3 membawa fitur ini

Apakah ada cara untuk memposisikan gambar latar sejumlah piksel dari kanan elemennya?

Nggak.

Solusi populer termasuk

• pengaturan margin-rightpada elemen sebagai gantinya
• menambahkan piksel transparan ke gambar itu sendiri dan memposisikannya top right
• atau menghitung posisi menggunakan jQuery setelah lebar elemen diketahui.

Solusi termudah adalah menggunakan persentase. Ini bukan jawaban yang Anda cari sejak Anda meminta ketepatan piksel, tetapi jika Anda hanya perlu sesuatu untuk memiliki sedikit bantalan antara tepi kanan dan gambar, memberikan sesuatu posisi 99% biasanya bekerja cukup baik.

Kode:

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

Jawaban yang kedaluwarsa: Sekarang diterapkan di browser utama, lihat jawaban lain untuk pertanyaan ini.

CSS3 telah memodifikasi spesifikasi background-positionsehingga akan bekerja dengan titik asal yang berbeda. Sayangnya, saya tidak dapat menemukan bukti bahwa itu sudah diterapkan di browser utama.

http://www.w3.org/TR/css3-background/#the-background-position Lihat contoh 12.

background-position: right 3em bottom 10px;

Seperti yang diusulkan di sini , ini adalah solusi peramban yang cantik yang bekerja dengan sempurna:

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

Saya menggunakannya karena fitur CSS3 untuk menetapkan offset yang diajukan dalam jawaban yang ditandai sebagai penyelesaian pertanyaan belum didukung di browser dengan baik. Misalnya

Jawaban yang paling tepat adalah sintaks empat nilai baru untuk posisi latar belakang, tetapi sampai semua browser mendukungnya, pendekatan terbaik Anda adalah kombinasi dari respons sebelumnya dalam urutan berikut:

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

Trik sederhana tapi kotor adalah dengan hanya menambahkan offset yang Anda inginkan ke gambar yang Anda gunakan sebagai latar belakang. itu tidak bisa dipertahankan, tetapi itu menyelesaikan pekerjaan.

Ini akan bekerja paling baik besar peramban modern ... selain dari IE (dukungan peramban) . Meskipun halaman itu mencantumkan> = IE9 sebagai didukung, pengujian saya tidak setuju dengan itu.

Anda dapat menggunakan properti calc () css3 seperti itu;

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

Bagi saya ini adalah cara terbersih dan paling logis untuk mencapai margin ke kanan. Saya juga menggunakan fallback menggunakan border-right: 10px solid transparent;untuk IE.

Ok Jika saya mengerti apa yang Anda minta Anda akan lakukan ini;

Anda memiliki wadah DIV Anda dipanggil #main-containerdan .my-elementitu ada di dalamnya. Gunakan ini untuk membantu Anda memulai;

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

Ngomong-ngomong, lebih baik berlatih menggunakan kelas jika Anda mereferensikan elemen level yang lebih rendah dalam sebuah halaman (saya berasumsi Anda karenanya mengubah nama saya di atas.

Spesifikasi CSS3 yang memungkinkan asal yang berbeda untuk posisi latar belakang sekarang didukung di Firefox 14 tetapi masih belum di Chrome 21 (tampaknya IE9 mendukungnya, tetapi saya belum mengujinya sendiri)

Selain masalah Chrome yang dirujuk @MattyF, ada ringkasan yang lebih ringkas di sini: http://code.google.com/p/chromium/issues/detail?id=95085

Jika Anda memiliki elemen proporsional, Anda dapat menggunakan:

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

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

Dalam contoh ini, .validakan menjadi kelas dengan gambar dan .halfakan menjadi baris dengan ukuran setengah dari yang standar.

Kotor, tetapi berfungsi sebagai pesona dan itu cukup mudah dikelola.

Jika Anda ingin menggunakan ini untuk menambahkan panah / ikon lainnya ke tombol misalnya maka Anda dapat menggunakan css pseudo-elements?

Jika ini benar-benar gambar latar belakang untuk seluruh tombol, saya cenderung memasukkan spasi ke dalam gambar, dan cukup gunakan

background-position: right 0;

Tetapi jika saya harus menambahkan misalnya panah yang dirancang ke tombol, saya cenderung memiliki html ini:

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

Dan cenderung melakukan hal berikut dengan 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;
}

Dengan menggunakan: setelah pemilih, saya menambahkan elemen menggunakan CSS hanya untuk memuat ikon kecil ini. Anda bisa melakukan hal yang sama hanya dengan menambahkan rentang atau <i>elemen di dalam elemen-a. Tapi saya pikir ini adalah cara yang lebih bersih untuk menambahkan ikon ke tombol dan didukung lintas-browser.

Anda dapat memeriksa biola di sini: http://codepen.io/anon/pen/PNzYzZ

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

gunakan tengah tepat sebagai posisi kemudian tambahkan perbatasan transparan untuk mengimbanginya?

Jika Anda memiliki elemen lebar tetap dan mengetahui lebar gambar latar belakang Anda, Anda bisa mengatur posisi latar belakang menjadi: lebar elemen - lebar gambar - jarak yang Anda inginkan di sebelah kanan.

Misalnya: dengan elemen 100px-lebar dan gambar 300px-lebar, untuk mendapatkan celah 10px di sebelah kanan, Anda atur ke 100-300-10 = -210px:

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

Dan Anda mendapatkan 80 piksel paling kanan dari gambar Anda di sebelah kiri elemen Anda, dan celah 20px di sebelah kanan.

Saya tahu ini kedengarannya bodoh tapi kadang-kadang menghemat waktu ... Saya menggunakan sebanyak itu secara vertikal (celah di bawah) untuk tautan navigasi dengan teks di bawah gambar.

Tidak yakin itu berlaku untuk kasus Anda.

masalah saya adalah saya membutuhkan gambar latar belakang untuk tetap jarak yang sama dari perbatasan kanan ketika jendela diubah ukurannya yaitu untuk tablet / ponsel dll. Perbaikan saya adalah menggunakan percenatge seperti:

background-position: 98% 6px;

dan itu menempel di tempatnya.

Iya! baik untuk memposisikan gambar latar belakang seolah-olah 0px dari sisi kanan browser, bukan dari kiri - saya menggunakan:

background-position: 100% 0px;