相关问题
HarmonyOS 背景图片如何填充满组件
449浏览 • 1回复 待解决
Button是否支持默认状态是背景图片A，点击按下时是背景图片B，抬起手指恢复背景图片A
929浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理背景图和视频的沉浸式效果？
77浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在HarmonyOS Next中实现高效的数字滚动动画效果？
51浏览 • 0回复 待解决
HarmonyOS 如何设置状态栏为背景图片或颜色
23浏览 • 1回复 待解决
谁知道背景图片如何铺满？用的DirectionalLayout布局组件
8500浏览 • 3回复 待解决
#鸿蒙通关秘籍#如何利用HarmonyOS模块实现数字滚动动画？
114浏览 • 1回复 待解决
怎么实现text的背景图片随文本长度变化而伸缩，保持高度不变
892浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现地址交换动画？
97浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现使用Spring Curve的文本抖动动画？
101浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置？
123浏览 • 1回复 待解决
HarmonyOS 想问一个背景图片上面叠2个Text，应该怎么布局？
234浏览 • 1回复 待解决
Tabs 可以直接设置 tabBar 的背景图片吗，目前文档上只支持设置背景色
2162浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现组件的滑入滑出动画效果？
215浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现背景模糊效果？
83浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果？
79浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示本地存档图片？
60浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在数字滚动动效中如何利用animateTo实现动画效果并刷新数字列表？
54浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为标题应用属性动画？
144浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现退出登录？
121浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示网络图片？
111浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中实现地址交换动画？
114浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS多点触控实现图片缩放和移动？
103浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS Next中实现显示用户当前位置功能？
137浏览 • 1回复 待解决
如何实现按钮组件没有背景，直接用背景图当背景？
1903浏览 • 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; } }