html - 使用图像背景 CSS 淡出 div 标签的两侧

Question

我正在构建一个网站，我的页眉中有一个动画图像。此图像是一个彩色条，从右到左循环动画，给人以无限向左移动的印象。

我想要完成的是在图像的左侧和右侧产生淡入/淡出效果，而不影响其背景图像的动画效果。

这是我的 HTML 代码:

<div id="hbaranim"><div id="hbarchild"></div></div>

还有我当前的 CSS(只有动画图像):

#hbaranim {
width: 100%;
height: 5px;
overflow-x: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
#hbaranim #hbarchild {
position: relative;
width: 8524px;
height: 5px;
background-image: url("img/colorbartile.png");
background-repeat: repeat-x;   
-webkit-animation: hbaranim_roll linear 245s infinite;
}
@-webkit-keyframes hbaranim_roll {
from { right: 0px; }
to { right: 2131px; }
}

JSFiddle

编辑:目前使用的 HTML 是使用两个 div 标签，但它们中没有任何内容，所以只使用一个可能会更好(老实说，我不确定该怎么做...)

编辑 2:澄清一下，动画图像位于渐变背景之上，因此在这种情况下，像某些人建议的那样在图像上放置另一个渐变是行不通的。它确实需要在两侧保持透明。

编辑 3:你们中的一些人还建议使用 CSS 渐变而不是图像，但我在实际网站上使用的图像包含一些其他细节，这些细节无法在 CSS 中复制。对于这个例子，我使用了一张确实可以很容易地用 CSS 渐变复制的图像。

编辑 4:更新 fiddle 以包含整个 header

Answer 1

您可以在具有渐变背景的父元素上使用绝对定位的伪元素来实现这一点。您也可以使用单个 div 实现相同的效果。

更新:从原始问题中的编辑 3 开始，我在下面使用的彩虹渐变可以用图像文件替换，完全相同的原则适用。

• More information on pseudo elements
• More information on gradients

示例

*{box-sizing:border:box;}
body{margin:0;}
.header{
    background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);
    box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);
    height:150px;
    position:relative;
}
h1{
    color:#fff;
    font-family:arial;
    font-size:48px;
    padding:25px 0 0;
    margin:0;
    text-align:center;
}
h2{
    color:#fff;
    font-family:arial;
    font-size:24px;
    line-height:25px;
    margin:0;
    text-align:center;
}
#hbaranim{
    -webkit-animation:hbaranim_roll linear 10s infinite;
    animation:hbaranim_roll linear 10s infinite;
    background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;
    background-size:200%;
    bottom:10px;
    height:5px;
    position:absolute;
    width:100%;
}
#hbaranim::before,#hbaranim::after{
    content:"";
    display:block;
    height:100%;
    position:absolute;
    top:0;
    width:25%;
    z-index:1;
}
#hbaranim::before{
    background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));
    left:0;
}
#hbaranim::after{
    background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));
    right:0;
}
@-webkit-keyframes hbaranim_roll{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:200% 0;
    }
}
@keyframes hbaranim_roll{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:200% 0;
    }
}

<div class="header">
  <h1>Name of Site</h1>
  <h2>www.site.nl</h2>
  <div id="hbaranim"></div>
</div>

---

如果您喜欢冒险，您可以在没有嵌套 div ( Fiddle ) 的情况下执行此操作，或者甚至没有父级 div ( Fiddle )

---

以下片段是在等待 Ties 确认删除子 div 是一个选项时作为示例提供的，并作为记录包含在下面。

#hbaranim{
    overflow:hidden;
    padding:10px 0;
    position:relative;
    width:100%;
}
#hbaranim #hbarchild{
    background-color:#000;
    height:20px;
    position:relative;
    width:8524px;
    z-index:1;
}
#hbaranim::before,#hbaranim::after{
    content:"";
    display:block;
    height:20px;
    position:absolute;
    top:10px;
    width:20%;
    z-index:2;
}
#hbaranim::before{
    background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
    left:0;
}
#hbaranim::after{
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
    right:0;
}

<div id="hbaranim">
    <div id="hbarchild"></div>
</div>