Cara mengulang teks sebagai imej latar dalam css menggunakan elemen ()

Baru -baru ini, satu trend reka bentuk telah sangat popular: memaparkan teks berulang kali. Sebagai contoh, laman web GoCompare menggunakan reka bentuk ini dalam kempen pengiklanan berbilang saluran yang besar. Nike juga menggunakan teknik reka bentuk ini dalam pengiklanannya.

Saya telah berfikir tentang bagaimana untuk mencapai kesan reka bentuk ini di laman web. Kami boleh mengulangi teks secara langsung dalam markup, atau mengeksport reka bentuk sebagai imej menggunakan alat seperti Photoshop, tetapi meletakkan teks dalam imej tidak kondusif untuk SEO dan kebolehcapaian. Walaupun dengan teks sebenar, kami tidak mahu pembaca skrin membacanya dengan kuat.

Pelbagai fungsi pelbagai fungsi pelbagai fungsional

Ok, berhenti!

Faktor -faktor ini seolah -olah membuat reka bentuk web seperti ini sukar dicapai. Saya kemudian mendapati diri saya tidak sabar-sabar untuk menggunakan ciri-ciri element() yang lama tetapi kurang disokong () dalam CSS. Ia membolehkan menggunakan unsur HTML sebagai imej latar belakang, sama ada elemen butang tunggal atau kandungan lengkap<div> . Menurut spesifikasi:<blockquote><p> Fungsi <code>element() hanya menghasilkan semula penampilan elemen yang dirujuk, bukan kandungan sebenar dan strukturnya. Penulis harus menggunakannya untuk tujuan hiasan sahaja.

Untuk tujuan kami, kami akan merujuk elemen teks untuk kesan pendua.

Mari kita tentukan ID yang boleh digunakan untuk elemen teks yang ingin kita ulangi. Kami namakannya #thingy . Ambil perhatian bahawa apabila kita menggunakan #thingy , kita mesti menambah -moz- awalan sebelum element() nilai. Walaupun Firefox telah menyokong element() sejak 2010, malangnya, tiada pelayar lain yang menyokongnya sejak itu.

 .element {
  latar belakang-imej: -moz-element (#thingy);
}

Ini adalah kemunculan semula iklan Nike yang telah kita lihat sebelum ini. Sekali lagi, Firefox dikehendaki melihat demo seperti yang diharapkan.

Pernahkah anda melihat bagaimana ia berfungsi dalam konsep? Saya meletakkan elemen ( #versatility ) pada halaman, menyembunyikannya dengan menetapkan ketinggiannya kepada sifar, menetapkannya sebagai imej latar belakang badan, dan kemudian menggunakan harta background-repeat untuk mengulanginya secara menegak di bawah halaman.

element() latar belakang dinamik . Ini bermakna jika elemen HTML yang dirujuk berubah, penampilan imej latar belakang elemen menggunakannya juga berubah. Ini sama dengan menggunakan harta tersuai: Tukar pembolehubah dan kemas kini di semua tempat di mana ia digunakan.

Sudah tentu, terdapat kes penggunaan lain untuk harta ini. Lihat bagaimana Preethi menggunakannya untuk membuat navigasi menatal dalam halaman untuk artikel. Jika anda ingin lebih maju, anda juga boleh menggunakan elemen kanvas HTML sebagai latar belakang. Salah satu cara saya menggunakannya adalah untuk memaparkan tangkapan skrin halaman dalam direktori. Vincent de Oliveira mendokumenkan beberapa contoh yang sangat kreatif. Ini adalah kesan refleksi imej jika anda suka reka bentuk web retro:

Sangat sejuk, bukan? Sekali lagi, saya harap saya dapat mengatakan ini adalah satu cara untuk mendapatkan kesan reka bentuk mudah ini yang boleh dimasukkan ke dalam pengeluaran, tetapi itu berlaku. Sebenarnya, ini adalah peringatan yang hebat untuk membuat suara anda untuk apa yang anda mahu laksanakan dalam penyemak imbas anda. Di Webkit dan Chromium, anda boleh menghantar tiket awam. Semoga kami akhirnya mendapat ciri ini di Safari dan Chrome.

Atas ialah kandungan terperinci Cara mengulang teks sebagai imej latar dalam css menggunakan elemen (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!