在网页上的特定位置设置背景图像

时间:2021-06-11 22:43:27

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;
 }