Ist es möglich, ein HTML-Dokument oder ein HTML-Fragment als CSS-Inhalt zu rendern?

Frage:

Ist es das? Ist es möglich, ein Bild in der CSS-Inhaltseigenschaft eines HTML-Elements mit dem url()-Wert von content anzuzeigen?

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

Oder mit der Inhaltseigenschaft eines Pseudoelements, zum Beispiel ::before?

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

Ist es möglich, ein HTML-Dokument oder ein HTML-Element als CSS-Inhalt darzustellen?

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

Antwort:
Der Inhalt Die Eigenschaft bestimmt, was innerhalb des Elements oder Pseudoelements gerendert wird. Es benötigt eine durch Kommas getrennte Liste von URIs, gefolgt von einer durch Leerzeichen getrennten Liste von Token. Wenn mehrere URIs bereitgestellt werden, wird jeder nacheinander ausprobiert, bis ein Wert gefunden wird, der sowohl verfügbar als auch unterstützt ist. Der letzte Wert wird als Fallback verwendet, wenn die anderen fehlschlagen.

`<uri>` 

Für andere URIs als URIs im letzten durch Kommas getrennten Abschnitt des Werts gilt: Wenn der URI verfügbar ist und das Format unterstützt wird, dann wird der Element oder Pseudoelement wird zu einem ersetzten Element, andernfalls wird das nächste Element in der durch Kommas getrennten Liste verwendet, falls vorhanden.

BEISPIEL 4

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

Im obigen Beispiel, wenn Header /mng hatte kein unterstütztes Format, dann wäre stattdessen header/png verwendet worden. Wenn im obigen Beispiel auch header/png nicht verfügbar war, dann wird

Element wäre leer, da die letzte Alternative keine ist.

Um ein Element auf seinen Inhalt zurückgreifen zu lassen, müssen Sie Inhalte explizit als Fallback angeben:

BEISPIEL 5

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

Nach dem Login kopieren

PROBLEM 3 Was passiert, wenn keine Formate unterstützt werden und der Autor nicht explizit einen Fallback angibt?

PROBLEM 4 Warum greift ein Element nicht auf Inhalte zurück, es sei denn, ein Autor sagt dies ausdrücklich?

Das obige ist der detaillierte Inhalt vonIst es möglich, Inhalte mithilfe eingebetteter Dokumente oder Elemente in CSS zu rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!