포함된 문서나 요소를 사용하여 CSS에서 콘텐츠를 렌더링하는 것이 가능합니까?

CSS 콘텐츠에서 HTML 문서나 HTML 조각을 렌더링할 수 있나요?

질문:

그런가요? content의 url() 값에서 HTML 요소의 CSS 콘텐츠 속성에 이미지를 표시할 수 있습니까?

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

또는 의사 요소에서 content 속성을 사용합니다(예: ::before?

).

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

CSS 콘텐츠에서 HTML 문서나 HTML 요소를 렌더링할 수 있나요?

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

답변:
콘텐츠 속성은 요소 또는 의사 요소 내부에 렌더링되는 내용을 지정합니다. 쉼표로 구분된 URI 목록과 그 뒤에 공백으로 구분된 토큰 목록이 필요합니다. 제공된 URI가 여러 개인 경우 사용 가능하고 지원되는 값을 찾을 때까지 각 URI가 차례로 시도됩니다. 다른 값이 실패할 경우 마지막 값이 대체 수단으로 사용됩니다.

`<uri>` 

값의 마지막 쉼표로 구분된 섹션에 있는 URI 이외의 URI의 경우 URI가 사용 가능하고 형식이 지원되면 요소 또는 의사 요소는 대체된 요소가 됩니다. 그렇지 않으면 쉼표로 구분된 목록의 다음 항목이 사용됩니다(있는 경우).

예 4

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

위의 예에서 헤더 /mng가 지원되는 형식이 아니면 header/png가 대신 사용되었을 것입니다. 위의 예에서 header/png도 사용할 수 없으면

마지막 대안은 없음이므로 요소는 비어 있습니다.

요소의 콘텐츠에 대한 대체 요소를 만들려면 콘텐츠를 대체 요소로 명시적으로 지정해야 합니다.

예 5

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

문제 3 지원되는 형식이 없고 작성자가 명시적으로 대체를 표시하지 않으면 어떻게 되나요?

문제 4 작성자가 명시적으로 명시하지 않는 한 요소가 콘텐츠로 대체되지 않는 이유는 무엇인가요?

위 내용은 포함된 문서나 요소를 사용하여 CSS에서 콘텐츠를 렌더링하는 것이 가능합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!