我正在尝试在我的角度项目中创建一个CSS动画。我有一个图像,并且正在尝试为其背景图像设置动画。图像已加载,但背景图像未加载,并且控制台中没有错误(未出现polkaDots.jpg)。这是我的文件夹结构:
my-app
- src
- app
- component
- component.css
- component.html
- assets
- images
- homebackground.jpg
- polkaDots.jpg
component.html
<img back-img id = "homebackground" src="assets/images/homebackground.jpg" >
component.css
#homebackground{
width: 100%;
height: 25%;
position: absolute;
left: 0%;
bottom: 0px;
overflow: hidden;
z-index: 0;
background: url('../../assets/images/polkaDots.jpg');
opacity: .4;
animation: sparkle_animation 75s linear infinite;
}
@keyframes sparkle_animation{
0%{background-position: 0 0;}
100%{background-position: 0 150px;}
}