작은 프로그램 개발시 배경 이미지를 설정하는 방법

소개:

WeChat 애플릿을 개발할 때 wxss 파일의 로컬 이미지를 직접 참조할 수 없다는 것을 알고 있습니다. 그렇지 않으면 런타임 중에 다음 오류가 발생합니다.

(비디오 공유 학습: 프로그래밍 비디오)

"로컬 리소스 이미지는 WXSS를 통해 얻을 수 없습니다. 네트워크 이미지나 base64를 사용하거나 565b296a3970f2fc50e58c1bb915cb79 태그를 사용할 수 있습니다.

이 글에서는 565b296a3970f2fc50e58c1bb915cb79 태그 사용 방법을 소개합니다.

구체적인 단계:

1. wxml 파일에 565b296a3970f2fc50e58c1bb915cb79 태그를 추가합니다:

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class=&#39;background&#39; src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

2. 추가:

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

wxss 파일에서:

-1개 사용 가능 그림은 하단에 배치되며 다른 부분에는 영향을 주지 않습니다. (관련 추천:

위 내용은 작은 프로그램 개발시 배경 이미지를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!