[CSS] 배경 이미지가 크롭된 텍스트 스타일 만들기 CSS

배경이미지가 크롭된 텍스트스타일 css

 

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다.

텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다.

 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">

<style>
    * {
        background:#818473;
    	width:100%;
        text-align:center;
        margin:0 auto;
    }
    .qoutes_contents {
        width:700px;
        margin: 1em auto;
        text-align:center;        
        background:url(../tutorial/001textback/text-background.jpg); 
        background-size:cover; 
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color: transparent;
        font-size: 6rem;        
        font-family: 'Anton', sans-serif;
        text-transform: uppercase;
        text-align: center;
        letter-spacing:-0.01em;
        line-height: 110%;        
    }
</style>

<div class="qoutes_contents">
    People will throw stones at you.<br>
    Don't throw them back.<br>
    Collect them all and build an empire.
</div>

 

VIEW DEMO