background image color

html에서 이미지를 원하는 칼라로 바꾸려면 자식 div를 하나 더 만들면 된다.



맨 위에 있는 이미지가 원본 이미지, 아래는 자식의 백그라운드 칼라를 red, green, blue로 지정했을때, 결과이다.

<style>
.parent_box {
    position: absolute;
    width: 200px;
    height: 200px;
    background:url('grass.jpg') no-repeat;
    background-size: 100% 100%;
}

#child_box {
    width: 100%;
    height: 100%;  
    background-color: rgba(255, 0, 0, 0.7);
}
</style>

<body>

<!--원본 이미지-->
<div class='parent_box' style='left:500px; top:50px'></div>

<!-- red background color-->
<div class='parent_box' style='left:100px; top:300px'>
    <div id='child_box'></div>
</div>

<!-- green background color-->
<div class='parent_box' style='left:500px; top:300px'>
    <div style='width:100%; height:100%; background-color:rgba(0, 255, 0, 0.7)'></div>
</div>

<!-- blue background color-->
<div class='parent_box' style='left:900px; top:300px'>
    <div style='width:100%; height:100%; background-color:rgba(0, 0, 255, 0.7)'></div>
</div>

</body>

자식 요소는 다음과 같이 width, height, background-color만 지정한다.

#child_box {
    width: 100%;
    height: 100%;  
    background-color: rgba(255, 0, 0, 0.7);
}

background_color.html

팁) rgba와 opaticy 차이점
rgba : rgba를 선언한 요소에만 적용이 되며 상속이 안된다.
opacity : opacity를 선언한 요소와 상속한 자식까지 적용이 된다.

시간이 지난후에 background-blend-mode와 mix-blend-mode가 있다는것을 알게 되었다.
div 2개 사용한것과 칼라가 차이가 난다.

background-blend-mode

모드 속성에는 여러가지가 있다.
div 하나로 조합 할수가 있다.

CSS

.multiimage-color {
    position: absolute;
    width: 200px;
    height: 200px;
    background: url('100.png') no-repeat, url('grass.jpg') no-repeat;
    background-size: 100% 100%;
    background-color: rgba(255, 0, 0, 0.7);
    background-blend-mode: multiply;
}

HTML

<div class='multiimage-color' style='left:1000px; top:400px;' >multiply</div>

다운로드: background_blend_mode.html

mix-blend-mode

모드 속성에는 여러가지가 있다.
div가 2개 이상 되어 조합 할수가 있다.

CSS

.container {
    position: absolute;
    width: 200px;
    height: 200px;
    background: url('grass.jpg') no-repeat;
    background-size: 100% 100%; 
}

.container-inner {
    width: 100%;
    height: 100%;  
    background-color: red;
    mix-blend-mode: overlay;
}

HTML

<div class="container">
   <div class="container-inner"></div>
</div>

다운로드: mix_test.html