明亮的半透明关于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)的背景下,你就可以看到效果是不是亮作为真正的,可以清楚地看到后面的专辑。我深入了解他们的源代码,但我没有找到诀窍。
答
解决方案
首先,梯度添加到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的原因很明显是因为背景颜色渐变与图像位于同一个元素上。所以图像叠加在背景渐变的顶部。
在您的网站上,您在之下有图像,然后将褪色的背景放在顶部 - 使其更难以看清。随着渐变背景上的图像,它使专辑艺术更清晰,更容易看到。
难以置信,问题solved.Thanks.And您的Chrome devTools使用什么主题? – Quill
不用担心!你能否考虑将此标记为接受的答案? 从2个版本开始,我没有在Chrome DevTools中使用主题,Chrome中包含默认的“黑暗”主题。要启用它,打开DevTools - >打开DevTools的设置(F1) - >在Appearance下,选择Theme:Dark –
等一下。但用你的方式,视差不起作用,当你的scoll – Quill