CSS를 사용하여 텍스트 초상화를 만드시겠습니까?

웹사이트에 스타일을 추가하는 것은 사용자가 웹사이트를 처음 방문할 때 매력 포인트 역할을 하기 때문에 웹사이트 제작에서 가장 중요한 부분입니다. CSS를 사용하여 다양한 유형의 디자인과 대화형 경험을 만들 수 있습니다. Illustrator 또는 Photoshop을 사용하여 텍스트 초상화를 만들어 디자인을 더욱 매력적으로 만들 수 있습니다.

이 글에서는 텍스트 초상화를 얻기 위해 CSS와 일부 JavaScript 기능을 사용하여 텍스트 초상화를 생성하고 생성하는 방법을 살펴보겠습니다.

텍스트 초상화 만들기

텍스트 초상화는 사물이나 사람처럼 보이는 텍스트가 포함된 것처럼 보이는 이미지입니다. CSS를 사용하여 이 텍스트 초상화를 구현하겠습니다. 텍스트 인물 사진에 사용할 방법에 대해 이야기해 보겠습니다.

텍스트 초상화를 만들 때 따르는 단계는 다음과 같습니다.

1단계 - 추가하려는 필수 텍스트가 포함된 문서를 만드는 것부터 시작합니다. "hello"라는 텍스트를 추가하고 JavaScript의 반복() 함수를 사용하여 해당 단어를 반복한다고 가정해 보겠습니다.

2단계 − 두 번째로 할 일은 배경 색상을 검정색으로 설정하여 배경을 더욱 매력적으로 만드는 것입니다. 또한 URL 기능을 사용하여 배경 이미지를 설정하고 "배경 반복" 속성을 사용합니다. 이미지가 반복되지 않도록 값을 "반복 없음"으로 설정하세요.

3단계 − 이제 이미지의 텍스트를 인쇄하므로 텍스트를 자르고 글꼴 변경, 크기 조정 등과 같은 다른 속성을 추가하겠습니다.

자바스크립트 반복 기능을 사용하기 위해.

문법

Javascript 반복 기능의 구문을 살펴보겠습니다.

으아아아

구문에 사용된 count 변수는 주어진 문자열을 몇 번 반복할지 함수에 알려주는 값이며, count 범위는 0부터 무한대까지입니다.

예

이를 더 잘 이해하기 위해 CSS를 사용하여 텍스트 초상화를 만드는 예를 살펴보겠습니다.

으아아아

위 코드에서는 단락을 생성하고 ID를 지정한 다음 JavaScript를 사용하여 반복할 문자열을 작성한 다음 getElementByid 함수를 사용하여 500번 반복한 다음 CSS 부분으로 이동하여 The 배경 이미지가 제거되고 텍스트가 잘려 이미지 전경에 있는 텍스트만 표시됩니다. "안녕하세요, 잘 지내세요"라는 필러 텍스트가 포함된 자동차 초상화를 받아보실 수 있습니다. 다음 코드의 출력을 살펴보겠습니다.

위 출력에서 ​​텍스트는 전경에 있고 자동차 이미지는 배경에 있는 것을 볼 수 있습니다. 우리는 JavaScript 반복을 사용하여 출력을 얻었고 값을 500으로 설정했습니다. 이는 텍스트가 전체적으로 500번 반복된다는 의미입니다. 캔버스.

string.repeat() 함수는 아래 예와 같이 지정된 수의 문자열 복사본을 사용하여 새 문자열을 만드는 내장 함수입니다.

으아아아

위 코드는 다음과 같은 출력을 생성합니다.

다음은 string.repeat 속성을 사용하는 방법을 보여주는 예입니다.

예

CSS를 사용하여 만든 텍스트 초상화의 또 다른 예를 살펴보겠습니다

으아아아

위 코드에서는 여러 CSS 속성을 사용하여 텍스트 초상화를 만드는 방법을 보여주었습니다. 위 코드의 JavaScript는 str.repeat 함수를 사용하여 이미지에서 텍스트를 여러 번 인쇄합니다.

위 출력에서 ​​텍스트가 실제 이미지인 오렌지 모양을 취한 것을 볼 수 있습니다. 이제 이 튜토리얼을 마무리하겠습니다.

결론

CSS와 몇 줄의 코드를 사용하여 텍스트 초상화를 만들고 JavaScript 함수 string.repeat를 사용하여 결과를 얻습니다. 먼저 전경에 표시할 텍스트를 작성하고 텍스트가 반복되는 횟수를 결정합니다. 우리가 얻게 될 출력은 텍스트의 문자 길이에 따라 달라집니다.

이 기사에서는 단 몇 줄의 CSS 코드와 JavaScript 함수를 사용하여 텍스트를 만드는 방법을 살펴보았습니다.

위 내용은 CSS를 사용하여 텍스트 초상화를 만드시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!