相关问题
Button是否支持默认状态是背景图片A，点击按下时是背景图片B，抬起手指恢复背景图片A
1921浏览 • 1回复 待解决
HarmonyOS 切换tabs的时候，该如何修改其他图片的背景图片
976浏览 • 1回复 待解决
HarmonyOS 背景图片如何填充满组件
2047浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在HarmonyOS Next中实现高效的数字滚动动画效果？
1240浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理背景图和视频的沉浸式效果？
1314浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现地址交换动画？
1204浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何利用HarmonyOS模块实现数字滚动动画？
1579浏览 • 1回复 待解决
HarmonyOS 深浅主题使用背景图片无法跟随切换
1028浏览 • 1回复 待解决
HarmonyOS 如何设置状态栏为背景图片或颜色
1091浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现使用Spring Curve的文本抖动动画？
1389浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现背景模糊效果？
1414浏览 • 1回复 待解决
谁知道背景图片如何铺满？用的DirectionalLayout布局组件
9972浏览 • 3回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置？
1250浏览 • 1回复 待解决
怎么实现text的背景图片随文本长度变化而伸缩，保持高度不变
1931浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中实现地址交换动画？
1242浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现组件的滑入滑出动画效果？
1891浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示网络图片？
1294浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果？
1131浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现动画与手势的流畅衔接？
1359浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示本地存档图片？
1105浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在数字滚动动效中如何利用animateTo实现动画效果并刷新数字列表？
1030浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为标题应用属性动画？
1204浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现退出登录？
2117浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS多点触控实现图片缩放和移动？
1346浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙开发中实现地址交换动画的显式动画机制？
1073浏览 • 0回复 待解决
背景图片的位置可以通过background-position属性来设置，从而实现移动动画。以下代码演示了背景图片在组件中的不同移动方式。 html <!-- xxx.hml --> <div class="container"> <div class="content"></div> <div class="content1"></div> </div>
css /* xxx.css */ .container { height: 100%; background-color:#F1F3F5; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .content{ width: 400px; height: 400px; background-image: url('common/images/bg-tv.jpg'); background-size: 100%; background-repeat: no-repeat; animation: change 3s infinite; border: 1px solid black; } .content1{ margin-top:50px; width: 400px; height: 400px; background-image: url('common/images/bg-tv.jpg'); background-size: 50%; background-repeat: no-repeat; animation: change1 5s infinite; border: 1px solid black; } @keyframes change{ 0%{ background-position:0px top; } 25%{ background-position:400px top; } 50%{ background-position:0px top; } 75%{ background-position:0px bottom; } 100%{ background-position:0px top; } } @keyframes change1{ 0%{ background-position:left top; } 25%{ background-position:50% 50%; } 50%{ background-position:right bottom; } 100%{ background-position:left top; } }