Cara menulis html pada gambar. Kami menempatkan teks di atas gambar menggunakan css. Contoh cara menulis teks pada gambar
Saya sering melihat di kolom komentar pelajaran atau di forum ketika para pemula bertanya: “Saya ingin memposting teks di atas gambar, dan ternyata berada di bawah atau di atas gambar. Tolong." Mari kita lihat contoh spesifik tentang cara menulis teks pada gambar dimana saja.
Kita perlu menandatangani namanya di samping setiap sayuran pada ilustrasi di bawah. Tugasnya tampak sederhana, tapi percayalah, ini bisa membuat webmaster pemula mana pun menjadi gila.
Saya sengaja mengambil gambar berukuran 1280x733 sebagai contoh untuk juga menunjukkan cara menyesuaikannya dengan resolusi layar yang berbeda. Lewatlah sudah hari-hari ketika mempelajari cara tata letak hanya untuk resolusi desktop saja sudah cukup. Saat membuat tata letak, Anda harus segera menjaga kemampuan beradaptasi.
markup HTML
Pertama-tama, kita membuat wadah untuk gambar sayuran dan tulisan. Perlu diketahui bahwa kami menempatkan setiap prasasti di blok terpisah dengan kelas berbeda. Dan ini logis, karena semua prasasti akan memiliki koordinatnya sendiri di halaman, dan kami akan mengelolanya dengan menulis properti dalam div.
Setelah selesai HTML- markup, kita hanya melihat sebagian gambar dan teks yang muncul di bawah gambar. Gambaran yang familiar, bukan?
Gambar telah diperluas ke semua pikselnya yang agak besar dan bilah gulir horizontal telah muncul, tetapi untungnya hal ini mudah diperbaiki dengan mengatur lebar gambar menjadi 100%, sehingga membuatnya adaptif. Setidaknya satu masalah telah terpecahkan.
Gambar (
lebar: 100%;
}
Sekarang mari kita beralih ke teks.
gaya CSS
Dalam gaya kontainer, properti kuncinya adalah posisi: relatif. Dengan ini kami mengubah aturan dan meminta agar koordinat dihitung bukan dari sudut kiri atas jendela browser, tetapi dari sudut wadah, yang merupakan induk dari semua elemen yang bersarang di dalamnya dan menempati 90% jendela.
Wadah (
lebar: 90%;
posisi: relatif;
perataan teks: tengah;
warna: #000;
font-family: arial hitam;
ukuran font: 250%;
}
Kiri(
posisi: mutlak;
teratas: 26%;
kiri: 6%;
}
Tengah (
posisi: mutlak;
teratas: 17%;
kiri: 42%;
}
Benar(
posisi: mutlak;
atas: 1%;
kanan: 27%;
}
Kami mengatur koordinat bukan dalam piksel, tetapi dalam %, bukan secara kebetulan; ketika ukuran layar diperkecil, maka teks akan tetap berada di tempat yang sama di mana kami memperbaikinya. Ini kabar baik, namun kabar buruknya adalah ukuran teks tidak menyusut seiring dengan gambar. Gambarnya sendiri diperkecil, tetapi teksnya harus diperkecil secara paksa.
Pertanyaan media
Pada resolusi yang sama atau kurang dari 768 piksel, kurangi ukuran font menjadi 150%. Bagaimana kami tahu bahwa kami perlu memperkecil ukuran menjadi 768 piksel? Melalui pemeriksa kode, kami melihat pada titik mana teks melompat ke elemen yang berdekatan.
posisi:relatif; meluap: tersembunyi;
Jika Anda hanya perlu menampilkan sebagian blok cahaya, menghilangkan piksel berlebih secara tidak merata, gunakan properti tersebut klip: lurus (atas, kanan, bawah, kiri); yang tidak berlaku tanpa kedudukan: mutlak. otomatis menunjukkan bahwa sisinya tetap tidak berubah.
posisi:relatif;
klip: rect(otomatis, 200px, otomatis, 30px);
Interaksi suatu blok dengan position: absolute dengan elemen lainnya
Kita dapat menempatkan beberapa elemen dalam satu blok. Untuk kemudahan persepsi, saya tidak akan menyebutkannya.
Jika blok A diberi posisi: absolut, maka blok B akan diposisikan seolah-olah blok A tidak ada - ia akan menggantikannya. Blok A tidak lagi dapat mempengaruhi posisi blok B baik melalui maupun dengan luasnya, seolah-olah sedang melayang di atasnya.
Blok A tumpang tindih dengan blok B. Namun begitu blok kedua menambahkan posisi dalam nilai relatif, absolut, atau tetap, situasinya berubah.
posisi: mutlak;
posisi: relatif;
posisi: mutlak;
posisi: mutlak;
Sekarang yang diprioritaskan adalah blok yang terletak di bawah kode, dalam hal ini putih B. Untuk mengubah tatanan natural, kita menggunakan indeks-z. Semakin tinggi nilai parameter ini, semakin tinggi letak elemen tersebut. Perlu diingat bahwa untuk position: static properti ini diabaikan (tidak termasuk properti) dan di IE ada .
Karena elemen tidak dapat mempengaruhi posisi satu sama lain, tanpa menentukan nilainya (atau jika nilainya sama), atas, bawah, kanan, kiri, dan margin terletak di atas satu sama lain. Dan tinggi balok induk, jika tidak tetap, adalah nol. Banyak hal yang didasarkan pada prinsip ini, termasuk.
lebar dan posisi: absolut
lebar (atau tinggi) tidak berlaku untuk sebagian besar elemen sebaris. Nilai defaultnya adalah auto, yang untuk elemen blok setara dengan lebar: 100%.
Bawaan
Bawaan
lebar: 100%; untuk keduanya, ini adalah lebar induknya, yang disetel ke posisi selain statis.
Bawaan
Jika lebar tidak ditentukan, tetapi nilai berlawanan dari kiri dan kanan ditentukan, maka balok akan meregang ke seluruh lebar antara dua titik ini. Kalau tidak, hak akan diabaikan.
Bawaan
Contoh cara menulis teks pada gambar.
Contoh berikut akan menunjukkan kehebatan penggunaan overlay CSS.
Hutan dan ladang berwarna putih,
Padang rumput putih.
Dekat pohon aspen yang tertutup salju
Cabang seperti tanduk.
Di bawah es yang kuat
Air sungai-sungai sedang tertidur.
Tumpukan salju putih
Salju turun di atap.
Bintang-bintang terang di langit
Mereka memimpin tarian bundar.
Tahun tua mengucapkan selamat tinggal -
Tahun Baru akan datang.
E. Trutneva.
Contoh cara menumpangkan satu teks ke teks lainnya.
Contoh
Sampel
Contoh
Sampel
Contoh cara menempatkan teks di atas gambar dalam HTML
Cara menulis teks pada gambar Opsi ini menjadi semakin populer dan dimungkinkan dengan melapisi satu lapisan di atas lapisan lainnya menggunakan properti CSS.
Secara umum, pertanyaannya sendiri sederhana. Tidak ada yang rumit dalam menempatkan satu blok di atas blok lainnya. Namun tetap saja, ada beberapa poin dalam masalah ini yang layak untuk didiskusikan. Saya pikir akan ada orang yang tertarik dengan hal ini.
Idenya adalah untuk sekadar melapisi beberapa teks pada gambar. Teks disajikan dalam blok-blok dengan panjang yang bervariasi, diasumsikan terletak di sisi kiri, dengan isian rata di sekitar teks. Misalnya saja seperti pada gambar ini:
Garis besar dokumen
markup HTML
Film di Taman:
Kung Fu Panda
Tentu saja, akan lebih mudah menggunakan elemen div untuk menampilkan gambar sebagai latar belakang, tetapi dalam kasus ini saya berasumsi bahwa gambar tersebut adalah konten dokumen, dan oleh karena itu termasuk dalam HTML. Kita akan menggunakan elemen div sebagai wadah untuk posisi absolut teks di dalamnya.
CSS
.image ( posisi: relatif; lebar: 100%; /* untuk IE 6 */ ) h2 ( posisi: absolut; atas: 200px; kiri: 0; lebar: 100%; )Jadi kami menempatkan teks langsung di atas gambar. Tugas kita berikutnya adalah membuat latar belakang teks. Sejak elemen
adalah elemen blok, kita tidak dapat menggunakannya untuk tujuan ini. Mari kita gunakan elemen inline . Mari kita bungkus teks di dalam judul di dalamnya.
Film di Taman:
Kung Fu Panda
Kami akan menggunakan rentang ini untuk menghias teks dan latar belakang:
Rentang H2 ( warna: putih; font: tebal 24px/45px Helvetica, Sans-Serif; spasi huruf: -1px; latar belakang: rgb(0, 0, 0); /* jika baris berikutnya tidak berfungsi */ latar belakang : rgba(0, 0, 0, 0.7); bantalan: 10px; )
Masalah
Seperti yang Anda lihat dari gambar, di akhir sebuah baris, blok teks berakhir tepat setelah karakter terakhir pada baris tersebut, dan dimulai tepat di sebelah kiri pada baris berikutnya. Properti padding untuk suatu rentang tidak akan membantu kita dalam kasus ini.
Untuk mengatasi masalah ini, Anda perlu menggunakan bentang tambahan di kedua sisi tag
, dalam hal ini kita sudah bisa menggunakan padding.
Film di Taman:
Kung Fu Panda
Kami akan mengatur properti padding ke span baru ini:
H2 span.spacer ( padding: 0 5px; )
Bagaimana dengan semantik?
Pada tahap ini desain sudah selesai, namun masih ada satu masalah yang tersisa. Yakni, sejumlah besar elemen HTML tambahan yang ditambahkan hanya untuk desain. Maksudku rentang. Untuk mengatasi masalah ini, kami akan menggunakan jQuery. Untuk melakukan ini, hapus semua rentang di markup dan tambahkan secara dinamis:
Film di Taman:
Kung Fu Panda
$(fungsi() ( $("h2").wrapInner(" "); $("h2 br").sebelum(" ").setelah(" ");
});
Tag HTML yang menentukan perataan dan lekukan teks
Teks yang dibenarkan digunakan dalam tipografi
Contoh di bawah ini menunjukkan cara menyelaraskan teks menjadi lebar halaman:
sejajarkan = "kiri" sejajarkan = "kanan"
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
sejajarkan = "ratakan" sejajarkan = "tengah"
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
Nilai justifikasi memastikan keseragaman menyelaraskan teks ke kanan dan kiri, itu adalah lebarnya. Metode ini banyak digunakan dalam percetakan.
Menyelaraskan teks dalam HTML ke tengah dan lebar
Sejajarkan teks dalam HTML di tengah, teks di kanan:
Hasil:
Atribut dan nilai
- align="left" - mendefinisikan perataan teks kiri(bawaan).
- sejajarkan="tengah" - menyelaraskan teks ke tengah.
- sejajarkan="kanan" - menyelaraskan teks ke kanan.
Sejajarkan | Indentasi teks HTML
Teks HTML dan lekukannya di sisi kiri halaman
Kami akan memproduksi lekukan teks di sebelah kiri dengan dua cara:
Hasil:
Lihat di jendela baru.
Beberapa orang menemukan jalan keluar yang salah: mereka menggambar teks pada gambar di editor grafis, dan kemudian menempatkan gambar dengan teks tersebut dalam dokumen html. Namun bagaimana jika teks tersebut perlu diganti? Gambar ulang gambarnya lagi? Ada solusi yang lebih sederhana.
Hasilnya kita mendapatkan:
Semuanya tertutup salju putih: baik pepohonan maupun rumah, angin sepoi-sepoi bersiul: "Halo, musim dingin-musim dingin!"
Inti dari metode yang disajikan adalah kita membuat wadah div yang akan berisi gambar dan teks. Dalam hal ini, kita akan memposisikan teks relatif terhadap sudut kiri bawah wadah.
Kode HTML:
Semuanya tertutup salju putih: baik pepohonan maupun rumah, angin sepoi-sepoi bersiul: "Halo, musim dingin-musim dingin!"
kode css:
.container ( display:inline-block; position:relative; ) .container div ( display: inline-block; posisi: absolut; bawah: 10px; kiri: 0px; warna latar: rgba(0,0,0,.4 ); bantalan: 5px 5px 5px 10px; warna: putih ) - display: inline-block - kita membutuhkan wadahnya agar tidak meregang sepanjang lebar seluruh halaman.
- position: relative - memaksa semua blok bersarang dengan position: absolute menghitung koordinat posisinya bukan dari jendela browser, tetapi dari block.container
- display: inline-block - sehingga gaya yang terkait dengan elemen blok dapat diterapkan ke teks kita.
- position: absolute - untuk menempatkan blok menggunakan koordinat tertentu: bawah, kiri - indentasi bawah dan kiri (koordinat) dimungkinkan untuk menggunakan atas dan kanan sebagai gantinya
Tampilkan deskripsi saat Anda mengarahkan kursor ke gambar
Cara yang ditunjukkan di atas dapat digunakan untuk menampilkan teks saat Anda mengarahkan kursor ke gambar dengan mouse (dapat berguna untuk mendeskripsikan produk di toko online).
Kung Fu Panda
, dalam hal ini kita sudah bisa menggunakan padding.
Kung Fu Panda
Kung Fu Panda
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
Jumlah pekerja yang bekerja di sektor jasa dan penyebaran informasi terus bertambah setiap hari. Jika simbol abad yang lalu adalah pertanian dan pabrik, maka simbol abad ke-21 saat ini adalah kantor yang dilengkapi komputer yang memiliki akses arus informasi.
