CSS 이미지 불투명 속성 적용

아래와 같은 코드에서 배경에 불투명이미지를 삽입하고자 한다.

  <div class="main_container">
        <div class="small_container">
            <div class="main_box2">                  
                <div> 
                     <h4>About</h4>
                    <p >11111</p>
                    <a href="/1.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
            <div class="main_box3">
                <div>
                    <h4>About</h4>
                    <p>22222</p>
                    <a href="/2.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
            <div class="main_box4">
                <div>
                     <h4>33333</h4>
                     <a href="/3.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>

opacity 를 사용하게 되면 자식까지 영향을 받게 되므로..linear-gradient 를 사용하면된다.

.small_container>div.main_box3 {  
    /*  하위 단까지  opacity  영향을 받음
     background: url(/web/upload/free_design/bn_bg02.jpg);  
     background-size: cover;   
     background-position: center; 
     opacity:0.5; 
    */
    /* 이미지만 영향 받기 위해 */
    background: linear-gradient( rgba(239,239,239,.5), rgba(239,239,239,.5) )
              , url('/web/upload/free_design/bn_bg02.jpg'); 
    background-size: cover;    
    background-position: center;
}
.small_container>div.main_box3>div>p{color:#484848; font-weight:bold;}