首页 > 其他分享 >图片的background position

图片的background position

时间:2023-03-19 14:56:54浏览次数:28  
标签:image 246 background position top 图片

先看最终效果:

画圈的位置是图片,原始图片长这样:

如果我们直接使用加载图片,mode的四种模式
产品希望只展示图片的上半部分,我首先使用image标签 mode的top模式,结果如下:

确实是显示了上半部分,但是图片两边被切割了。image标签+mode=top这个方案不行。
跟同事讨论后,选择了使用view.设置 background image, 再使用background-position来实现:
wxml:
<view class="questionImg" style="background: url({{item.question_image[0]}}) top no-repeat"> </view>
wxss:

.questionImg {
  width: 100%;
  height: 222rpx;
  background-size: 120% auto !important;
  transition: all 0.3s;
  background-position: left -80rpx top 0rpx !important;
  border: 2rpx solid rgb(246, 246, 246);
}`

注意background-size 和 background-position
如果不设置 这两个属性的效果

标签:image,246,background,position,top,图片
From: https://www.cnblogs.com/tufei7/p/17233047.html

相关文章