Question

我在CSS中使用多个背景（一个是公司背景，另一个是员工）。

这是我的代码：

background: url("../../images/andy.png"),url("../../images/background.png") no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

这很好用，但我想为第一个背景参数（url("../../images/andy.png")）设置动画并做其他CSS选项。

有没有可能的方法来引用它？它不是它自己的元素所以它怎么可能呢？

这是我的HTML

<section id="intro" class="main style1 dark fullscreen">
    <div class="content container 100% 12u(mobile)">
        <header>
            <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div>
        </header>
        <div style="width:40%;margin-right:auto;margin-left:auto;">
            <p style="width:100%; margin-right:0; margin-left:0;"><i>“sometext”.</i></p>
        </div>
        <footer>
            <a href="#work" class="button style2 down">More</a>
        </footer>
    </div>
</section>

Answer 1

<强>首先

你的JSFiddle有点过于复杂，动画是错误的元素等。

为清晰起见，我删除了HTML中不必要的元素。

这是一个更新的JSFiddle，显示您想要的效果https://jsfiddle.net/6nstfftn/4/

阅读CSS动画！：

我强烈建议您查看CSS动画。我在YouTube上关注的是一个人，他非常棒。他有一些很棒的教程 - 值得一看。

在https://www.youtube.com/devtipsfordesigners

找到他

他最近完成了一系列关于CSS过渡/动画/特效等的视频。看看它。

采取的步骤：

制作#index元素的position: relative;
为:before和:after添加伪元素，设置position: absolute;及其top，bottom，left和{{1}到right（基本上使它们填充“父”元素的宽度和高度）。 确保设置0，否则它们将没有大小！
然后，对于伪元素，设置content: ''，并将background-image设置为正确分层 - 您可以按照自己喜欢的顺序排列它们
为每个“背景”设置“默认”样式 - 因此，如果您希望它以z-index不透明度（淡入）开始，请执行此操作;同样，如果你想让它移动，将它移动到“开始”位置： TL; DR - 如果你将它们设置为“结束”位置，你可能最终看到元素出现并在动画开始前闪烁 - 另外，如果CSS中没有定义属性，动画可能不知道它是以什么开头
使用0创建动画，使用@keyframes animationName和from设置动画的开始和结束属性
将to属性应用于每个“背景”以允许平滑
将transition属性应用于每个背景，设置要使用的每个animation的名称。设置持续时间，并使用@keyframes保持动画的结束状态
坐下来享受一杯有益的热饮

以下是CSS的摘录：

forwards

在我的示例中，我没有包含#intro { position: relative; } #intro:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("http://i65.tinypic.com/2woc2o5.png") no-repeat top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -2; transition: all 0.5s ease-in-out; animation: background 0.5s forwards; opacity: 0; } #intro:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("http://i65.tinypic.com/2mn0w8j.png") no-repeat top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1; transition: all 0.5s ease-in-out; animation: andy 1s forwards; transform: translateX(-100%); } @keyframes andy{ from { transform: translateX(-100%); } to { transform: translateX(0%); } } @keyframes background { from { opacity: 0; } to { opacity: 1; } }，transition，animation等特定于供应商的扩展程序。显然，您可以根据自己的喜好添加这些扩展程序以实现兼容性。< / p>

我强烈建议您查看CSS动画以获得所需的效果。

那里有数百个（如果不是数千个）。

有任何问题，请问！

希望这会有所帮助：）

Answer 2

最简单的解决方案是在：after或：before伪元素中添加background.png，用这种方法改变填充成员How do I change the background image using jQuery animation?

我认为没有办法通过css只改变一个bg。您必须添加/更改两者。

Answer 3

你可以这样做，

.my-class:before{
     background: url("../../images/andy.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    /* Do the Animation for this Background image*/
}
.my-class:after{
     url("../../images/background.png") no-repeat top;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    /* Do the Animation for this Background image*/
}

这是HTML

<section id="intro" class="main style1 dark fullscreen">
    <div class="content container 100% 12u(mobile)">
        <header>
            <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div>
        </header>
        <div style="width:40%;margin-right:auto;margin-left:auto;">
            <p style="width:100%; margin-right:0; margin-left:0;">
                <i>“sometext”.</i>
            </p>
        </div>
        <footer>
            <a href="#work" class="button style2 down">More</a>
        </footer>
    </div>
</section>

具有CSS动画的多个背景

3 个答案: