250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

[생활코딩] CSS 수업 - blend 2 : background-blend-mode 본문

CSS

[생활코딩] CSS 수업 - blend 2 : background-blend-mode

목표는 커리 2021. 4. 2. 05:03
728x90
SMALL
<!doctype>
<html>
<head>
<style>
    .blend{
        height:400px;
        border:5px solid;
        background-color: rgba(255,0,0,0.5);
        background-size: cover;
        background-image: url(%EC%BA%A1%EC%B2%98.PNG);
        background-blend-mode: darken;
    }
    </style>
    </head>
    <body>
        <div class='blend'>

        </div>
    </body>
</html>
  • rgba(255,0,0,0.5) : 맨 뒤에 a를 붙이면 투명도를 조절할 수 있다.
<!doctype>
<html>
<head>
<style>
    .blend{
        height:400px;
        border:5px solid;
        background-color: rgba(255,0,0,0.5);
        background-size: cover;
        background-image: url(%EC%BA%A1%EC%B2%98.PNG);
        background-blend-mode: saturation;
        transition: background-color 5s;
    }
    .blend:hover{
        background-color: rgba(255,0,0,1);
        transition: background-color 5s;
    }
    </style>
    </head>
    <body>
        <div class='blend'>

        </div>
    </body>
</html>
  • hover를 줘서 마우스가 올라왔을 때 다른 효과를 줄 수 있다.
  • transition을 줘서 부드러운 효과를 줬다.
    • hover에 준 건 마우스가 올라갔을 때 부드러운 효과를 주고, 그냥 클랴스에 준건 마우스를 밖으로 둘때 주는 효과이다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - transform 1 : 소개  (0) 2021.04.06
[생활코딩] CSS 수업 - blend 3 : mix-blend-mode  (0) 2021.04.05
[생활코딩] CSS 수업 - blend 1 : 소개  (0) 2021.04.01
[생활코딩] CSS 수업 - filter  (0) 2021.03.31
[생활코딩] CSS 수업 - 배경  (0) 2021.03.30
'CSS' Related Articles more
Comments