I am trying to add some animation to the background image. I am trying to rise it upwards for a particular height, how can i do That?
我想在背景图片中添加一些动画。我试图将它提升到一个特定的高度,我该怎么做?
.riseImages {
position: absolute;
width: 100%;
height: 300px;
overflow: hidden;
z-index: 4;
background-image: url("img/page1/bg shapes.png");
background-repeat: repeat;
background-size: 350px;
opacity: 0.3;
border-left: 1px solid blueviolet;
border-right: 1px solid blueviolet;
background-size: 350px 300px;
}
.topRise {
top: 0px;
left: 0px;
}
.bottomRise {
top: 500px;
left: 0px;
}
1 个解决方案
#1
2
yes, use background-position
http://www.w3schools.com/cssref/pr_background-position.asp
是的,使用背景位置http://www.w3schools.com/cssref/pr_background-position.asp
.riseImages
{
background-position: value;
position: absolute;
width: 100%;
height: 300px;
overflow: hidden;
z-index: 4;
background-image: url("img/page1/bg shapes.png");
background-repeat: repeat;
background-size: 350px;
opacity: 0.3;
border-left: 1px solid blueviolet;
border-right: 1px solid blueviolet;
background-size: 350px 300px;
}
.topRise {
top: 0px;
left: 0px;
}
.bottomRise {
top: 500px;
left: 0px;
}
#1
2
yes, use background-position
http://www.w3schools.com/cssref/pr_background-position.asp
是的,使用背景位置http://www.w3schools.com/cssref/pr_background-position.asp
.riseImages
{
background-position: value;
position: absolute;
width: 100%;
height: 300px;
overflow: hidden;
z-index: 4;
background-image: url("img/page1/bg shapes.png");
background-repeat: repeat;
background-size: 350px;
opacity: 0.3;
border-left: 1px solid blueviolet;
border-right: 1px solid blueviolet;
background-size: 350px 300px;
}
.topRise {
top: 0px;
left: 0px;
}
.bottomRise {
top: 500px;
left: 0px;
}