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 );

用于背景图像不透明度的CSS3渐变

1 个答案: