首先在WordPress后台选择需要添加滑动背景图像的页面或文章,进入编辑页面。
在编辑页面中选择“插入媒体”,上传需要作为背景图像的图片。
将上传的图片在编辑页面中插入,并将其设置为居中对齐。
在编辑页面的文本编辑模式中添加以下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);}
}
将代码中的“图片URL”替换为步骤2中上传的图片的URL,将“图片描述”替换为图片的描述。
保存页面或文章并查看效果。滑动背景图像应该会在页面内容上方滑动。
示例代码中的动画时间为20秒,可以根据需要进行调整。另外,可以通过修改CSS代码的背景颜色来改变滑动背景图像的背景色。