Question

最近我使用纯Javascript和scss重建Spotify主页来测试我的前端研究，这是link。它还没有完成。你可以看到我和真实的区别是大背景，标记是

<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）部分背景，你可以看到效果并不像真正的那样明亮，可以清楚地看到后面的专辑。我深入了解他们的源代码，但我没有＆＃39;找到诀窍。

Answer 1

解决方案

首先，将渐变添加到元素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

关于spotify的明亮半透明？

1 个答案: