배경 이미지 불투명도를위한 CSS3 그라디언트

Question

나는 작업하고있는 웹 사이트의 영웅 요소에 대한 배경 이미지가 있습니다. .hero div의 배경 이미지를 투명도에서 가장자리의 불투명도까지 그라디언트로 만들려고하므로 두 div의 배경이 서로 혼합됩니다.

여기 내 index.html의 몸에서 지금 사용하고 코드입니다, 설명하기 :

<div class="hero"> 
    <div class="hero-inner"> 
     <h1>My awesome hero element</h1> 
    </div> 
</div> 

이 ... 이것은 내 style.css

.hero { 
    background-color: black; 
    width: 800px; 
} 

.hero-inner { 
    width: 700px; 
    height: 200px; 
    margin: auto; 
    background-image: url('http://i.imgur.com/PXzVXmR.png'); 
} 
.hero-inner h1 { 
    position: absolute; 
    font-family: Arial, sans-serif; 
    color: white; 
    padding: 10px; 
    background-color: rgba(0, 0, 0, 0.7); 
    left: 50px; 
    top: 20px; 
    font-size: 48px; 
} 

Here's the jsFiddle에 무엇이있다. .hero-inner의 배경 이미지를 가장자리에 .hero의 배경색으로 혼합하면 어떻게됩니까? Photoshop에서 비슷한 효과를 얻었지만 CSS3 그래디언트로이 작업을 수행 할 수 있는지 알고 싶습니다.

Answer 1

방사형 배경 그라디언트를 그릴 수 있지만 코드는 실제로보기 흉하고 무겁습니다. 당신이 제공 http://www.colorzilla.com/gradient-editor/

background: -moz-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%, rgba(205,57,71,1) 40%, rgba(80,79,130,0) 83%, rgba(30,87,153,0) 100%); 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(23%,rgba(255,48,48,1)), color-stop(40%,rgba(205,57,71,1)), color-stop(83%,rgba(80,79,130,0)), color-stop(100%,rgba(30,87,153,0))); 
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%); 
background: -o-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%); 
background: -ms-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%); 
background: radial-gradient(ellipse at center, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3030', endColorstr='#001e5799',GradientType=1);