相关问题
HarmonyOS 切换tabs的时候，该如何修改其他图片的背景图片
781浏览 • 1回复 待解决
Button是否支持默认状态是背景图片A，点击按下时是背景图片B，抬起手指恢复背景图片A
1714浏览 • 1回复 待解决
HarmonyOS 背景图片如何填充满组件
1613浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在HarmonyOS Next中实现高效的数字滚动动画效果？
916浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理背景图和视频的沉浸式效果？
1032浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现地址交换动画？
956浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何利用HarmonyOS模块实现数字滚动动画？
1213浏览 • 1回复 待解决
HarmonyOS 深浅主题使用背景图片无法跟随切换
782浏览 • 1回复 待解决
HarmonyOS 如何设置状态栏为背景图片或颜色
737浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现使用Spring Curve的文本抖动动画？
1071浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现背景模糊效果？
998浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置？
981浏览 • 1回复 待解决
谁知道背景图片如何铺满？用的DirectionalLayout布局组件
9424浏览 • 3回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现组件的滑入滑出动画效果？
1280浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示本地存档图片？
837浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果？
907浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现退出登录？
1411浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中实现地址交换动画？
925浏览 • 1回复 待解决
怎么实现text的背景图片随文本长度变化而伸缩，保持高度不变
1574浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示网络图片？
945浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为标题应用属性动画？
908浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在数字滚动动效中如何利用animateTo实现动画效果并刷新数字列表？
780浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现悬浮窗功能？
1042浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现文本提示气泡？
1016浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现动画与手势的流畅衔接？
1056浏览 • 1回复 待解决
背景图片的位置可以通过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; } }