반응형
HTML과 CSS(이미지에 텍스트 오버레이)를 사용하여 이미지를 텍스트로 채우는 방법을 알고 계십니까?
필수 조건:-
- 텍스트를 채울 이미지.
- Visual Studio Code와 같은 코드 편집기.
다음은 오늘 만들 제품의 데모입니다.
보시다시피 이 소녀의 이미지는 텍스트로 가득 차 있고 엄청난 양의 텍스트로 인해 이미지가 가려지고 흐릿합니다.
HTML과 CSS를 이용하여 제작하고 대응력도 높이도록 하겠습니다.
HTML 파일부터 시작합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<p id="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
voluptatum. Architecto porro veniam optio voluptatem placeat vero eligendi
vitae quisquam nisi quas rem ipsum repellat autem, consequuntur quibusdam
doloribus exercitationem consectetur amet iste! Laudantium molestiae
officia obcaecati. Voluptatibus magnam nobis officiis veritatis suscipit
nihil cupiditate iusto error consequuntur facilis! Cupiditate, ipsa
quisquam, sequi at explicabo quidem laborum deleniti tempora ex similique,
dolorem magni fugit laudantium dolor ut reprehenderit est! Reiciendis
perferendis exercitationem praesentium nihil sapiente fugit. Impedit
adipisci maiores possimus corrupti rerum nostrum quis! Maiores impedit
iure nesciunt, doloribus inventore expedita neque totam quas ex sed fugit
repellendus qui omnis adipisci alias nulla obcaecati molestiae eum, aut
exercitationem similique. Molestias corporis quaerat cum assumenda,
adipisci corrupti eum mollitia rerum ea modi. Possimus deleniti quaerat
excepturi similique illum. Ipsum nam voluptas autem sunt incidunt
veritatis tempora, ullam, perspiciatis suscipit, quae quaerat ex dolores
explicabo eius similique fugiat culpa? Obcaecati laboriosam illo
voluptatibus, magnam aperiam dignissimos aut vitae cupiditate tempora
aliquid, consectetur cum et soluta porro, laudantium quaerat earum nostrum
eveniet nobis deleniti dicta? Perspiciatis at expedita tempora quos
veritatis provident. Earum, facilis nihil. Ratione soluta nam blanditiis
natus odit porro, eum at nisi accusamus hic veniam tenetur atque
consequuntur delectus aliquam vel voluptatibus, cum ea nemo aspernatur qui
dolorem. Voluptatem excepturi ipsum consequuntur libero autem impedit
iusto fuga quasi. Minima vel recusandae quia explicabo nostrum aperiam
natus reprehenderit dolorum, quas cumque laboriosam alias illum voluptatem
vitae, nihil aspernatur rerum delectus sed soluta pariatur atque ratione
officia dolorem! Ea quaerat facere dolores. Atque distinctio est ratione
quos explicabo veniam mollitia, temporibus numquam architecto sed iusto
vel animi repellendus nisi nam, aut ullam nesciunt vitae ipsum. Commodi
adipisci exercitationem similique odio quo nihil laudantium ipsum facere
rerum illo ipsa libero explicabo dicta accusantium deserunt a nesciunt,
consequatur aspernatur? In, accusamus. Ipsa magnam omnis nam explicabo,
ducimus dolores officia quibusdam maiores est, assumenda accusamus eaque
vero similique odit debitis. Nulla vero similique iusto optio vitae, natus
quidem, placeat quaerat, a velit consequatur quibusdam eum ea ullam.
Consectetur, temporibus odio in asperiores voluptates corporis laboriosam!
Nobis nulla dolorem ratione illum voluptates in dolores molestias a!
Corporis optio mollitia consequuntur voluptatibus sunt nobis est illo quod
praesentium cupiditate. Alias sed nostrum deserunt voluptatum, ad
molestiae in facilis. Saepe maiores alias quisquam provident illum
repellat pariatur omnis laudantium libero ex dolores, blanditiis vero.
Optio temporibus itaque id sapiente architecto eligendi, ipsum a iste aut
porro est dolor dolorem vitae deleniti error consectetur mollitia
inventore necessitatibus doloremque quasi. Ullam eius cum facere natus
nemo non ipsum laudantium quaerat praesentium esse veniam atque
accusantium deleniti quae obcaecati distinctio maiores quidem saepe
delectus eligendi commodi expedita fuga, temporibus molestias. Explicabo
architecto doloremque natus ad! Reiciendis, voluptate ea. Corrupti quod
nesciunt neque sapiente ullam vero libero debitis cumque ducimus, modi,
mollitia inventore magni fugiat quam totam sequi recusandae sed earum
deserunt velit at! Ratione inventore hic expedita accusantium fugit eaque
reprehenderit dolorem excepturi quia doloribus iste nobis id temporibus
nostrum, ducimus fugiat nam illo. Labore quis nesciunt eum minima
voluptatibus placeat!Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
voluptatum. Architecto porro veniam optio voluptatem placeat vero eligendi
vitae quisquam nisi quas rem ipsum repellat autem, consequuntur quibusdam
doloribus exercitationem consectetur amet iste! Laudantium molestiae
officia obcaecati. Voluptatibus magnam nobis officiis veritatis suscipit
nihil cupiditate iusto error consequuntur facilis! Cupiditate, ipsa
quisquam, sequi at explicabo quidem laborum deleniti tempora ex similique,
dolorem magni fugit laudantium dolor ut reprehenderit est! Reiciendis
perferendis exercitationem praesentium nihil sapiente fugit. Impedit
adipisci maiores possimus corrupti rerum nostrum quis! Maiores impedit
iure nesciunt, doloribus inventore expedita neque totam quas ex sed fugit
repellendus qui omnis adipisci alias nulla obcaecati molestiae eum, aut
exercitationem similique. Molestias corporis quaerat cum assumenda,
adipisci corrupti eum mollitia rerum ea modi. Possimus deleniti quaerat
excepturi similique illum. Ipsum nam voluptas autem sunt incidunt
veritatis tempora, ullam, perspiciatis suscipit, quae quaerat ex dolores
explicabo eius similique fugiat culpa? Obcaecati laboriosam illo
voluptatibus, magnam aperiam dignissimos aut vitae cupiditate tempora
aliquid, consectetur cum et soluta porro, laudantium quaerat earum nostrum
eveniet nobis deleniti dicta? Perspiciatis at expedita tempora quos
veritatis provident. Earum, facilis nihil. Ratione soluta nam blanditiis
natus odit porro, eum at nisi accusamus hic veniam tenetur atque
consequuntur delectus aliquam vel voluptatibus, cum ea nemo aspernatur qui
dolorem. Voluptatem excepturi ipsum consequuntur libero autem impedit
iusto fuga quasi. Minima vel recusandae quia explicabo nostrum aperiam
natus reprehenderit dolorum, quas cumque laboriosam alias illum voluptatem
vitae, nihil aspernatur rerum delectus sed soluta pariatur atque ratione
officia dolorem! Ea quaerat facere dolores. Atque distinctio est ratione
quos explicabo veniam mollitia, temporibus numquam architecto sed iusto
vel animi repellendus nisi nam, aut ullam nesciunt vitae ipsum. Commodi
adipisci exercitationem similique odio quo nihil laudantium ipsum facere
rerum illo ipsa libero explicabo dicta accusantium deserunt a nesciunt,
consequatur aspernatur? In, accusamus. Ipsa magnam omnis nam explicabo,
ducimus dolores officia quibusdam maiores est, assumenda accusamus eaque
vero similique odit debitis. Nulla vero similique iusto optio vitae, natus
quidem, placeat quaerat, a velit consequatur quibusdam eum ea ullam.
Consectetur, temporibus odio in asperiores voluptates corporis laboriosam!
Nobis nulla dolorem ratione illum voluptates in dolores molestias a!
Corporis optio mollitia consequuntur voluptatibus sunt nobis est illo quod
praesentium cupiditate. Alias sed nostrum deserunt voluptatum, ad
molestiae in facilis. Saepe maiores alias quisquam provident illum
repellat pariatur omnis laudantium libero ex dolores, blanditiis vero.
</p>
</body>
</html>
```
p 태그 안의 코드에 보이는 긴 단락 텍스트는 로렘을 사용하여 생성됩니다.
#### 로렘이 뭔데?
<div class="content-ad"></div>
저는 여기에 1200개의 단어(더미 텍스트)를 무작위로 생성하는 로렘1200을 사용했습니다.
Visual Studio Code를 사용하는 경우 코드 편집기 자체에서 코드 파일 옆의 출력을 볼 수 있는 Live Preview(라이브 미리 보기)라는 확장 버전을 설치할 수 있습니다.
### 이제 우리는 CSS 파일을 코드화할 것이다.
```js
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
p {
font-family: "Poppins", sans-serif;
line-height: 14px;
background: url("my-profile-photo.jpg");
-webkit-background-clip: text;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 70vh;
background-position: center;
}
body {
background: black;
overflow: hidden;
}
```
<div class="content-ad"></div>
여기 구글 폰트에서 포핀스라는 폰트를 가져왔습니다.
저는 여기에 -webkit-background-clip 속성을 사용하여 문단 태그에 주어진 클래스인 텍스트로 제공했습니다. 이렇게 하면 텍스트가 이미지 위에 떠 있게 됩니다.
뷰포트에 대해 여기 사용된 이미지를 고정시킬 수 있도록 배경 첨부 파일을 고정해 놓았고 배경 이미지가 반복되지 않도록 백그라운드 이미지가 반복되지 않도록 했습니다.
자, 이제 코딩은 끝났습니다. 자, 결과를 봅시다.
### 산출량
이제 이 코드를 실행하면 반응성이 뛰어난 웹페이지도 제공됩니다.
<div class="content-ad"></div>
### 이 비디오는 선명하게 볼 수도 있습니다.
### 이게 도움이 되길 바래. 읽어주셔서 감사드리며 연결해보겠습니다!
제 블로그를 읽어주셔서 감사합니다. 내 유튜브 채널을 자유롭게 구독하고 링크드인이나 트위터에서 접속하세요.
'css' 카테고리의 다른 글
| 스크롤 기능이 활성화되는 동안 스크롤 막대 보기 숨기기 - CSS (0) | 2022.02.16 |
|---|---|
| CSS를 사용하여 스크롤 막대를 스타일 지정하는 방법 (0) | 2022.02.16 |
| CSSBattle 대상 #4 (0) | 2022.02.16 |
| CSS에서 이미지를 React적으로 만드는 방법이야 (0) | 2022.02.16 |
| 브라우저별 CSS 코드 작성 방법 (0) | 2022.02.16 |
댓글