Saya seorang pemula di pemrograman rails, berusaha menampilkan banyak gambar pada sebuah halaman. Beberapa gambar diletakkan di atas yang lain. Untuk membuatnya sederhana, katakan saya ingin kotak biru, dengan kotak merah di sudut kanan atas kotak biru (tetapi tidak ketat di sudut). Saya mencoba menghindari pengomposisian (dengan ImageMagick dan sejenisnya) karena masalah kinerja.
Saya hanya ingin posisi gambar yang tumpang tindih relatif satu sama lain.
Sebagai contoh yang lebih sulit, bayangkan odometer ditempatkan di dalam gambar yang lebih besar. Untuk enam digit, saya perlu menggabungkan satu juta gambar yang berbeda, atau melakukan semuanya dengan cepat, di mana semua yang diperlukan adalah menempatkan enam gambar di atas yang lain.
html
css
optimization
graphics
rrichter
sumber
sumber
Jawaban:
Ok, setelah beberapa waktu, inilah tujuan saya:
Sebagai solusi paling sederhana. Itu adalah:
Buat div relatif yang ditempatkan di aliran halaman; tempatkan gambar dasar terlebih dahulu sebagai relatif sehingga div tahu seberapa besar seharusnya; menempatkan overlay sebagai absolut relatif ke kiri atas gambar pertama. Kuncinya adalah untuk mendapatkan kerabat dan absolut yang benar.
sumber
a
dan "b" memiliki IDb
, bisakah kode JavaScript ini (pengaturanx
dany
berdasarkan perhitungan) berfungsi untuk mengubah posisib
?Ini adalah tampilan tulang punggung pada apa yang telah saya lakukan untuk mengapung satu gambar ke gambar lainnya.
Sumber
sumber
Berikut kode yang dapat memberi Anda ide:
JSFiddle
Saya menduga bahwa solusi Espo mungkin tidak nyaman karena mengharuskan Anda untuk memposisikan kedua gambar secara mutlak. Anda mungkin ingin yang pertama memposisikan dirinya dalam aliran.
Biasanya, ada cara alami untuk melakukannya yaitu CSS. Anda menempatkan posisi: relatif pada elemen wadah, dan kemudian benar-benar menempatkan anak-anak di dalamnya. Sayangnya, Anda tidak dapat menempatkan satu gambar di dalam yang lain. Itu sebabnya saya membutuhkan div kontainer. Perhatikan bahwa saya membuatnya menjadi mengambang agar autofit sesuai isinya. Membuatnya ditampilkan: inline-block secara teoritis juga bisa berfungsi, tetapi dukungan browser buruk di sana.
EDIT: Saya menghapus atribut ukuran dari gambar untuk menggambarkan poin saya dengan lebih baik. Jika Anda ingin gambar kontainer memiliki ukuran default dan Anda tidak tahu ukurannya sebelumnya, Anda tidak dapat menggunakan trik latar belakang . Jika Anda melakukannya, itu cara yang lebih baik.
sumber
Satu masalah yang saya perhatikan yang dapat menyebabkan kesalahan adalah bahwa dalam jawaban rrichter, kode di bawah ini:
harus menyertakan unit px dalam style misalnya.
Selain itu, jawabannya bekerja dengan baik. Terima kasih.
sumber
Anda benar-benar dapat memposisikan
pseudo elements
relatif terhadap elemen induknya.Ini memberi Anda dua lapisan tambahan untuk dimainkan untuk setiap elemen - sehingga memposisikan satu gambar di atas yang lain menjadi mudah - dengan markup semantik dan semantik (tanpa div kosong dll).
markup:
css:
Inilah DEMO LANGSUNG
sumber
Cara mudah untuk melakukannya adalah dengan menggunakan background-image lalu cukup meletakkan <img> di elemen itu.
Cara lain untuk melakukannya adalah menggunakan lapisan css. Ada banyak sumber daya yang tersedia untuk membantu Anda dengan ini, cukup cari lapisan css .
sumber
Gaya sejajar hanya untuk kejelasan di sini. Gunakan lembar gaya CSS nyata.
sumber
Mungkin agak terlambat tetapi untuk ini Anda dapat melakukan:
HTML
KELANCANGAN
sumber
@ buti-oxa: Tidak terlalu berlebihan, tetapi kode Anda tidak valid. HTML
width
danheight
atribut tidak memungkinkan untuk unit; Anda cenderung memikirkan CSSwidth:
danheight:
properti. Anda juga harus memberikan jenis konten (text/css
; lihat kode Espo) dengan<style>
tag.Meninggalkan
px;
diwidth
danheight
atribut dapat menyebabkan mesin rendering untuk balk.sumber
Buat div relatif yang ditempatkan di aliran halaman; tempatkan gambar dasar terlebih dahulu sebagai relatif sehingga div tahu seberapa besar seharusnya; menempatkan overlay sebagai absolut relatif ke kiri atas gambar pertama. Kuncinya adalah untuk mendapatkan kerabat dan absolut yang benar.
sumber