2

私が取り組んでいるウェブサイトのヒーロー要素の背景画像があります。.hero div の背景画像を透明からエッジの完全な不透明までのグラデーションにして、両方の div の背景が互いに溶け合うようにしたいと考えています。

説明するために、現在 my の本体で使用しているコードを次に示します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;
}

これが jsFiddleです。背景画像をエッジ.hero-innerの背景色とブレンドするにはどうすればよいですか? .hero私は仕事をするPhotoshopで同様の効果を持っていますが、これがCSS3グラデーションでできるかどうか知りたいです

4

1 に答える 1

2

放射状の背景グラデーションを描画できますが、コードは非常に見苦しく、重く見えます。

便利なグラデーション エディタを次に示します: 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 );
于 2013-04-20T07:47:34.687 に答える