CSS 생성 콘텐츠에 HTML 문서나 조각을 표시할 수 있습니까?-CSS 튜토리얼-php.cn

CSS 생성 콘텐츠에 HTML 문서나 조각을 표시할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-10-24 01:46:02

원래의

426명이 탐색했습니다.

Can HTML Documents or Fragments Be Displayed in CSS Generated Content?

CSS 콘텐츠에 .html 문서나 .html 부분을 표시할 수 있나요?

HTML 콘텐츠 속성을 사용하여 삽입합니다. 외부 리소스를 요소로 변환합니다. 이 리소스는 이미지, 비디오 또는 HTML 문서일 수도 있습니다.

content 속성에 HTML 문서를 표시하려면 url() 함수를 사용하여 문서의 URL을 지정할 수 있습니다. 예:

<code class="css">.content {
  content: url(example.html);
}</code>

로그인 후 복사

이렇게 하면 .content 요소에 example.html 파일의 내용이 표시됩니다.

컨텐트 속성을 사용하여 HTML 조각을 표시할 수도 있습니다. HTML 조각은 또는 꼬리표. 콘텐츠 속성에 HTML 조각을 표시하려면 data: URI 체계를 사용할 수 있습니다. 예:

<code class="css">.content {
  content: url(data:text/html,<html><body><h1>Hello, world!</h1></body></html>);
}</code>

로그인 후 복사

이렇게 하면 "Hello, world!"라는 텍스트가 표시됩니다. .content 요소에 있습니다.

CSS 생성 콘텐츠에서 .html 문서나 .html 요소를 렌더링할 수 있나요? @LGSon이 시연한 접근 방식을 사용합니다. SVG의 HTML에도 CSS 생성 콘텐츠가 포함되어 있습니다.

예, @LGSon이 시연한 접근 방식을 사용하여 HTML 문서 또는 CSS 생성 콘텐츠의 HTML 요소를 렌더링할 수 있습니다. 이 접근 방식에는 데이터 URI를 사용하여 HTML 콘텐츠를 CSS 파일에 포함시킨 다음 콘텐츠 속성을 사용하여 HTML 콘텐츠를 표시하는 작업이 포함됩니다.

예를 들어 다음 CSS 코드는 예제의 HTML 콘텐츠를 포함합니다. html 파일을 CSS 파일에 추가합니다.

<code class="css">.content {
  content: url(data:text/html,<?php echo file_get_contents('example.html'); ?>);
}</code>

로그인 후 복사

이 코드는 .content 요소에 example.html 파일의 내용을 표시합니다.

이 접근 방식을 사용하여 HTML을 표시할 수도 있습니다. CSS 생성 콘텐츠의 조각입니다. 예를 들어, 다음 CSS 코드는 HTML 조각

Hello, world!

CSS 파일에:

<code class="css">.content {
  content: url(data:text/html,<p>Hello, world!</p>);
}</code>

로그인 후 복사

이 코드는 "Hello, world!"라는 텍스트를 표시합니다. .content 요소에

위 내용은 CSS 생성 콘텐츠에 HTML 문서나 조각을 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 생성 콘텐츠에 HTML 문서나 조각을 표시할 수 있습니까?