Adakah Mungkin untuk Membuat Kandungan di CSS Menggunakan Dokumen atau Elemen Terbenam?

Adakah mungkin untuk memaparkan dokumen HTML atau serpihan HTML pada kandungan CSS?

Soalan:

Adakah ia mungkin untuk memaparkan imej pada sifat kandungan CSS unsur HTML pada nilai url() kandungan?

<div class="content">
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</div>

Atau menggunakan sifat kandungan pada elemen pseudo, contohnya ::before?

<div class="content">
  content::before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
  }
}</div>

Adakah mungkin untuk memaparkan dokumen HTML atau elemen HTML pada kandungan CSS?

<div class="content">
  content: url(data:text/html,abc); 
}</div>

Jawapan:
Kandungan harta menentukan apa yang diberikan di dalam unsur atau unsur pseudo. Ia memerlukan senarai URI yang dipisahkan koma, diikuti dengan senarai token yang dipisahkan oleh ruang. Jika terdapat berbilang URI yang disediakan, maka setiap satunya dicuba secara bergilir sehingga nilai yang tersedia dan disokong ditemui. Nilai terakhir digunakan sebagai sandaran jika yang lain gagal.

`<uri>` 

Untuk URI selain URI dalam bahagian nilai yang dipisahkan koma terakhir, jika URI tersedia dan formatnya disokong, maka elemen atau pseudo-element menjadi elemen yang digantikan, jika tidak, item seterusnya dalam senarai dipisahkan koma digunakan, jika ada.

CONTOH 4

h1 { content: url(header/mng), url(header/png), none; }

Dalam contoh di atas, jika pengepala /mng tidak dalam format yang disokong, maka header/png akan digunakan sebaliknya. Dalam contoh di atas, jika pengepala/png juga tidak tersedia, maka

elemen akan kosong, kerana alternatif terakhir adalah tiada.

Untuk membuat sandaran elemen pada kandungannya, anda perlu memberikan kandungan secara jelas sebagai sandaran:

CONTOH 5

content: url(1), url(2), url(3), contents;

ISU 3 Apakah yang berlaku apabila tiada format disokong dan pengarang tidak menyatakan sandaran secara eksplisit?

ISU 4 Mengapa elemen tidak sandarkan kepada kandungan melainkan seorang pengarang secara jelas menyatakan sedemikian?

Atas ialah kandungan terperinci Adakah Mungkin untuk Membuat Kandungan di CSS Menggunakan Dokumen atau Elemen Terbenam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!