2

我正在处理的网站上有一个英雄元素的背景图片。我想让 .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;
}

这是 jsFiddle。如何使背景图像与边缘.hero-inner的背景颜色混合？.hero我对完成这项工作的 Photoshop 也有类似的效果，但我想知道这是否可以通过 CSS3 渐变来完成

4

1 回答 1

2

You can draw radial background gradient, but code is really ugly and looks heavy.

Here is a gradient editor that may be useful: 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 回答