집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 미니 프로그램에서 그림(배경 그림)의 절대 위치 지정 방법

WeChat 미니 프로그램에서 그림(배경 그림)의 절대 위치 지정 방법

不言원래의: 2018-06-26 16:20:199066검색

이 글은 주로 WeChat 미니 프로그램의 사진 절대 위치(배경 이미지)에 대한 관련 정보를 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

WeChat 미니 프로그램의 사진 절대 위치 지정

서문:

미니 프로그램에서는 배경이미지를 사용해야 하는 경우가 있는데 배경이미지를 사용하면 이미지의 크기를 조절할 수 없는 경우가 있습니다. 배경이미지는 일반적으로 이미지를 1픽셀 배경이미지로 압축하는 데 사용되며, 그러면 자동으로 채워집니다. 배경 이미지를 사용하는 경우 일반적으로 7c13d7ef66bafa0a636fe9de418b497e 등과 같은 몇 가지 새로운 뷰 레이어를 사용하지만 애플릿은 html과 유사하며 다른 CSS 또는 wxss가 위치를 차지하고 다음 CSS 또는 wxss가 자동으로 아래쪽으로 조판되지만 이는 우리가 원하는 것이 아닌 경우가 많으므로 절대 위치 지정을 사용해야 합니다.

절대 위치 지정을 사용하려면 새 wxss를 사용하여 모든 하위 컨트롤을 포함하는 것이 가장 좋습니다. 그런 다음 모든 하위 컨트롤을 포함하는 이 wxss에서 속성 위치: 상대를 정의하고 각 하위 컨트롤에서 위치: 절대를 정의합니다. , 이제 상단 등 절대 위치 지정을 통해 위치를 수정할 수 있습니다. 첨부된 내용은 wxss 코드의 일부입니다:

.jx_card{
  width: 100%;
  height: 295rpx;
  background-color:#e6e6e6;
  position: relative
}
 .jxlogo{
  top: 47.5rpx;
  margin-left: 50rpx;
  width: 200rpx;
  height: 200rpx;
  float: left;
  position: absolute;
}

그런 다음 wxml 코드를 첨부합니다.

<view class="jx_card">
  <image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png">
      <image class="jxlogo" src="../../image/jx.png"/>
  </image>
 </view>

대략적인 내용은 다음과 같습니다. 이는 주로 position을 통해 위치 지정 유형을 정의한 다음 top을 사용하여 그림에서 위치를 찾아 정의합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

WeChat 미니 프로그램에서 그림(배경 그림)의 절대 위치 지정 방법

관련 기사