Question

我现在非常体面地看着其他开发人员的代码并将他们的技术应用到我自己的项目中。我很好奇，但Stripe处的开发人员如何在他们主页上的每个滑块上设置这些背景。

我没有看到图像链接，也没有看到任何使用CSS渐变的代码。

Answer 1

我没有看到图像链接，也没有看到任何使用CSS渐变的代码。

好吧，我这样做：

<div class="backgrounds">
  <div class="mobile-background current"></div>
  <div class="desktop-background"></div>
  <div class="international-background"></div>
</div>

html#home header.hero div.backgrounds div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    opacity: 0;
    -webkit-filter: alpha(opacity=0);
       -moz-filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        -ms-filter: alpha(opacity=0);
         -o-filter: alpha(opacity=0);
            filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
html#home header.hero div.mobile-background {
    background: #1E8ECF;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.26)),
        -webkit-linear-gradient(108deg,#26D0CE,#1A2980 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.26)),
        -moz-linear-gradient(108deg,#26d0ce,#1a2980 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.26)),
        -ms-linear-gradient(108deg,#26d0ce,#1a2980 90%);
}
html#home header.hero div.desktop-background {
    background: #0F1B58;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.2)),
        -webkit-linear-gradient(108deg,#E0DA81,#E0A681 10%,#0F1B58 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -moz-linear-gradient(108deg,#e0da81,#e0a681 10%,#0f1b58 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -ms-linear-gradient(108deg,#e0da81,#e0a681 10%,#0f1b58 90%);
}
html#home header.hero div.international-background {
    background: #00396F;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.2)),
        -webkit-linear-gradient(108deg,#E5E9BF 10%,#00396F 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -moz-linear-gradient(108deg,#e5e9bf 10%,#00396f 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -ms-linear-gradient(108deg,#e5e9bf 10%,#00396f 90%);
}
html#home header.hero div.backgrounds div.current {
    display: block;
    z-index: 1;
    opacity: 1 !important;
    -webkit-filter: none;
       -moz-filter: none;
        -ms-filter: none;
         -o-filter: none;
            filter: none;
}

元素的绝对链接：

html#home.js.csstransitions body div#main div#main-content header.hero.nav-animation-element div.backgrounds

条纹是如何处理幻灯片图像背后的背景颜色的？

1 个答案: