明亮的半透明关于spotify？

最近我重建了使用纯Javascript和scss的Spotify主页来测试我的前端研究，这里是link。它还没有完成。你可以看到我的，真实的之间的差别是大背景，标记为明亮的半透明关于spotify？

<div class="bg-main"> 
    <sceiotn class="can-see-the-background-image-1"></section> 
    <sceiotn class="can-see-the-background-image-2"></section> 
</div>

我给部分RGBA（RGB，0.7）的背景下，你就可以看到效果是不是亮作为真正的，可以清楚地看到后面的专辑。我深入了解他们的源代码，但我没有找到诀窍。

来源

2016-09-17 Quill

解决方案

首先，梯度添加到background财产的元素<div class="bg-main">上：

.bg-main { 
    width: 100%; 
    height: auto; 
    background-attachment: fixed; 
    background: url(../img/bg-albums.png) repeat, 
       linear-gradient(50deg, rgba(255, 65, 105, 1) 0, 
       rgba(124, 38, 248, 1) 100%) repeat 
    position: relative; 
}

然后，在你的元素<header class="header">从background属性中删除的梯度：

.header { 
    height: 760px; 
    width: 100%; 
    text-align: center; 
}

说明
Spotify的原因很明显是因为背景颜色渐变与图像位于同一个元素上。所以图像叠加在背景渐变的顶部。

在您的网站上，您在之下有图像，然后将褪色的背景放在顶部 - 使其更难以看清。随着渐变背景上的图像，它使专辑艺术更清晰，更容易看到。

final result

来源

2016-09-17 02:08:27

难以置信，问题solved.Thanks.And您的Chrome devTools使用什么主题？ – Quill

不用担心！你能否考虑将此标记为接受的答案？从2个版本开始，我没有在Chrome DevTools中使用主题，Chrome中包含默认的“黑暗”主题。要启用它，打开DevTools - >打开DevTools的设置（F1） - >在Appearance下，选择Theme：Dark –

等一下。但用你的方式，视差不起作用，当你的scoll – Quill

明亮的半透明关于spotify？

回答

相关问题