首页 问答 正文

如何使用WordPress添加滑动背景图像

注册会员 / 悠然自学 / 2023-06-12/ 浏览 153 次

  1. 首先在WordPress后台选择需要添加滑动背景图像的页面或文章,进入编辑页面。

  2. 在编辑页面中选择“插入媒体”,上传需要作为背景图像的图片。

  3. 将上传的图片在编辑页面中插入,并将其设置为居中对齐。

  4. 在编辑页面的文本编辑模式中添加以下HTML和CSS代码:

<div class="bg-image-slider">
  <img src="图片URL" alt="图片描述">
</div> 
.bg-image-slider {
  position: relative;
  height: 100vh;
  background-color: #000;
}
.bg-image-slider img {
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  animation: slide-bg-image 20s linear infinite;
}
@keyframes slide-bg-image {
  0% {transform: translateY(0);}
  100% {transform: translateY(-100vh);}
} 
  1. 将代码中的“图片URL”替换为步骤2中上传的图片的URL,将“图片描述”替换为图片的描述。

  2. 保存页面或文章并查看效果。滑动背景图像应该会在页面内容上方滑动。

示例代码中的动画时间为20秒,可以根据需要进行调整。另外,可以通过修改CSS代码的背景颜色来改变滑动背景图像的背景色。

大家谈论
    我的见解