SOURCE

<div class="box">
    <p class="animate">
        文字滚动的内容
    </p>
</div>
<div style="background-color:rgba(220,20,50,0.5)">background-color:0.5</div>
<div style="background-color:rgba(220,20,50,0.1)">background-color:0.1</div>
<div style="background-color:rgba(220,20,50,1)">background-color:1</div>
<div style="color:rgba(220,20,50,0.5)">color:0.5</div>
<div style="color:rgba(220,20,50,0.2)">color:0.2</div>
<div style="color:rgba(220,20,50,1)">color:1</div>
   <div class="bgimg"
        style="--tcolor:pink;height:300px;--bgimg:url('http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg')">
        background-color:0.5</div>
    <div class="bgimg"
        style="--tcolor:red;height:300px;--bgimg:url('http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg');">
        background-color:1</div>
    <div class="bgimg "
        style="--tcolor:orange;height:300px;--bgimg:url('http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg') ">
        background-color:2</div>
    <div class="bgimg " style="height:200vh; ">background-color:0.1</div>
<!-- <div class="bgimg " style="background-img:rgba(220,20,50,1) ">background-color:1</div> -->

.bgimg{
    position: relative;
    color:var(--tcolor);
    opacity: 1;
    overflow: scroll;
}
.bgimg::before{
    z-index:-1;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:var(--bgimg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    opacity: 1;
}
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ff6700;
    overflow: hidden;
}

.animate {
    padding-left: 20px;
    font-size: 12px;
    color:limegreen;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}