> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 배경 이미지를 표시할 수 없습니다

WeChat 애플릿 배경 이미지를 표시할 수 없습니다

풀어 주다: 2020-03-26 15:55:54
원래의
7535명이 탐색했습니다.

WeChat 애플릿 배경 이미지를 표시할 수 없습니다

작은 프로그램을 개발할 때 페이지 배경을 설정하고 CSS 코드를 사용하세요:

.page__bd{
    width: 100%;
    height: 220px;
    background: url('../../assets/img/images.jpg') no-repeat;
    background-size: 100% 100%;
}
로그인 후 복사

디버깅 도구에서는 표시되지만 스캔하여 휴대폰에 업로드할 때는 표시되지 않습니다.

배경 이미지는 네트워크 URL 또는 base64 이미지 인코딩만 사용할 수 있고 로컬 이미지는 이미지 태그 src 속성만 사용할 수 있기 때문입니다. 물론 이미지 태그의 src 속성은 네트워크 URL이나 base64 이미지 인코딩을 사용할 수도 있습니다.

해결책:

다음은 배경 이미지 표시를 구현하기 위해 이미지 태그 src 속성에 의해 설정됩니다.

인터페이스 구조:

<view class=&#39;set-background&#39;>
    <image class=&#39;background-image&#39; src=&#39;{{item.countryPic}}&#39;></image>
    <view class=&#39;background-content&#39;>
        <view class="set-background-avatar" background-size="cover">
            <image class="post-specific-image" src="{{item.picture}}"></image>
        </view>
    </view>
</view>
로그인 후 복사

wxss 스타일:

.set-background {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
}
.set-background-avatar {
    width: 220px;
    height: 150px;
}
.background-content {
    position: absolute;
    z-index: 1;
}
.background-image {
    width: 225px;
    height: 150px;
    opacity: 0.8;
}
.post-specific-image {
    width: 215px;
    height: 150px;
    vertical-align: middle;
}
로그인 후 복사

권장: "Mini 프로그램 개발 튜토리얼"

위 내용은 WeChat 애플릿 배경 이미지를 표시할 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿