CSS공통 Gradient 와 Background-Image 동시 적용 방안

1. 두개의 Element 를 이용하는 방법

<div id="alert">

    Text goes here!

    <div class="lines"></div>

</div>

#alert {

    position:relative;

    padding:10px;

    box-shadow:0px 1px 1px #000,  0px 1px 1px #F5BFB1 inset;

    background: #ea765a; /* Old browsers */

    background: -moz-linear-gradient(top,  #ea765a 0%, #d2583b 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* IE10+ */

    background: linear-gradient(to bottom,  #ea765a 0%,#d2583b 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */

}

.lines {

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    background:url(../img/lines.png);

    opacity:0.05;

}

    1) 실행예제 => http://jsfiddle.net/aPuvm/

2. CSS3 인 경우

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png);

    1) 참조문서 => http://www.w3.org/TR/css3-background/#layering

3. IE9 이하인 경우는 filter 속성을 이용

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Controls/Calendar/Events/email.png) progid:DXImageTransform.Microsoft.gradient( startColorstr='#D9D9D9', endColorstr='#989898',GradientType=0 ); /* IE6-9 */

    1) background-image 와 gradient filter 는 동시 적용 안됨

    2) 참조문서 => http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx#CSS_Filters