미니프로그램 배경화면 설정 방법

머리말:

처음에는 wxss 파일에서 background-image:url()을 사용하여 배경 이미지를 설정하려고 했는데 오류가 발생하여 다음 메시지가 표시됩니다. 페이지/me/me.wxss에 로컬 리소스 이미지가 있습니다. WXSS를 통해 얻을 수 없습니다. 네트워크 이미지나 base64를 사용하거나 태그 애플릿을 사용하여 지역 배경 이미지를 설정할 수 있습니다. wxss 파일의 경우 로컬 리소스를 확보할 수 없는 문제가 있습니다.

해결책:

1. 네트워크 이미지 사용

필요한 배경 이미지를 서버에 업로드한 다음 배경 이미지 주소를 사용할 수 있습니다.

배경 이미지를 동적으로 변경해야 하는 경우 인라인 스타일 바인딩 변수를 설정하여 배경 이미지를 동적으로 변경할 수 있습니다.

2. base64 형식 이미지를 사용하세요.

base64 이미지를 사용하여 배경을 설정할 수 있습니다. image

여기에서 base64 이미지 형식의 온라인 변환 주소를 추천합니다 http://imgbase64.duoshitong.com/

이미지를 선택하면 base64 형식의 이미지로 변환됩니다

안에 코드를 복사하고 배경에 넣기 : url (base64 변환 코드) 이렇게 하면 서버에 넣지 않고도 배경 이미지를 설정할 수 있습니다

(동영상 공유 학습: php 동영상 튜토리얼)

3. 배경 이미지를 설정하려면

아이디어: 배경 이미지처럼 보이도록 레벨을 변경하려면 CSS에서 z-index만 사용하면 됩니다.

코드를 보세요

wxml:

<view class = "login-box" >
   //本地图片
  <image src=&#39;../../../static/images/login_bg.png&#39;></image>
</view>

wxss:

page{
 height: 100%;
 width: 100%;
}
.login-box {
  height: 100%;
}
 
image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -999;
}

In 이 방법으로 배경 이미지의 효과도 얻을 수 있습니다.

관련 추천: 미니 프로그램 개발 튜토리얼

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