텍스트에 배경 이미지를 추가합니다.

2478 단어 beginnersprogrammingjavascriptwebdev
이 자습서에서는 텍스트에 배경 이미지를 추가하는 방법을 살펴보고 배경 이미지는 원하는 이미지가 될 수 있습니다.

이미 내 YouTube 채널에 전체 비디오 자습서를 게시했으며 그곳에서 볼 수 있습니다.

이제 바로 시작하겠습니다!

우리가 기대하는 인터페이스



여기서는 2개의 파일만 다룰 것입니다. index.html 및 styles.css .

HTML 설정
표준 HTML 상용구를 추가하고 외부 스타일시트( styles.css )를 연결합니다.

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> </body>
</html>


이제 HTML 본문에 h1 태그를 추가하겠습니다.

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <h1>Hello World!</h1>
</body>
</html>


이것이 우리의 HTML을 위한 것입니다.

HTML에 스타일 추가
가장 먼저 할 일은 글꼴 크기를 약간 늘리는 것입니다. 저는 100px로 설정하겠습니다.

h1{
   font-size:100px;
  }


그런 다음 Pexels Website에서 배경 이미지를 추가합니다.

h1{
  ...
 background:url(https://images.pexels.com/photos/7422479/pexels-photo-7422479.jpeg?cs=srgb&dl=pexels-nothing-ahead-7422479.jpg&fm=jpg)


이제 다음과 같은 인터페이스를 갖게 됩니다.



그러나 우리는 이런 방식이 아니라 텍스트의 배경에 있는 이미지를 원합니다. 이것이 그것을 구현하는 방법입니다.

h1{
  ...
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}


마지막으로 브라우저에서 미리 볼 때 예상한 결과를 얻어야 합니다.



결론



끝까지 읽어주셔서 감사합니다!
이 자습서의 비디오 버전을 볼 수 있습니다.
이 기사가 마음에 든다면 저를 팔로우해 주세요.
Node.js '__dirname' 대 'process.cwd()'
Solidity Complete Fundamentals 치트 시트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage