幻灯片图像后面的背景颜色是如何设置的？答案

【问题标题】：How did stripe do the background colors behind the slide images?幻灯片图像后面的背景颜色是如何设置的？
【发布时间】：2013-11-20 08:25:39
【问题描述】：

现在，我在查看其他开发人员的代码并将他们的技术应用到我自己的项目中时已经相当不错了。我很好奇Stripe 的开发人员如何在其主页上的每个滑块上设置这些背景的样式。

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

【问题讨论】：

标签： css image gradient styling

【解决方案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

【讨论】：