Nuke Olaf - Log Store

CSS - 그림위에 글자넣기 본문

Language/[PHP]

CSS - 그림위에 글자넣기

NukeOlaf 2020. 1. 29. 13:17

내 웹페이지에서 내 프로필 사진에 블러처리하고, 약간 어두운 필터를 입힌 뒤에
그 위에 글씨를 넣고 싶었다.

참고 사이트 >>

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_blurred_bg

https://zzznara2.tistory.com/806

 

<html>

<main class="home-image">
    <div class="main-cover"/>
    <article class="main-text">
        <h2>
            유쾌하지만, 실력은 강력하다!
        </h2>
        <h1>
            유쾌한 개발자 올라프
        </h1>
        <p>
            핵같은 실력을 갖기위해 노력하는 개발자입니다
        </p>
    </article>
</main>

 

<css>

        .home-image {
            position: relative;
            background-image: url("olaf.jpg");
            height: 100vh;

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            margin: 0;
            padding: 0;
        }
        .main-cover {
            position: absolute;
            height: 100%;
            width: 100%;
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, 0.7);
            z-index:1;
            margin: 0;
            padding: 0;
        }

        .main-text {
            position: absolute;
            top:50%;
            left:50%;
            border: 3px solid #f1f1f1;
            transform: translate(-50%, -50%);
            color: white;
            z-index: 2;
            text-align: center;
            margin: 0;
            width: 40%;
            padding: 30px;
        }
        .main-text h1 {
            font-size: 300%;
        }

 

'Language > [PHP]' 카테고리의 다른 글

HTML - 수평방향 타임라인 (Horizontal Timeline) 만들기  (0) 2020.01.29
PhpStorm 에서 Remote Host 의 파일을 다운로드 할 수 없다고 할때  (0) 2020.01.29
HTML - Semantic Elements 시멘틱 태그(의미요소)란?  (0) 2020.01.28
HTML 이란 무엇인가?  (0) 2020.01.28
PHP 와 MySQL 연동 확인하기  (0) 2020.01.27
'Language/[PHP]' Related Articles more
Comments