小程序-浮动view背景图大小自适应

最新推荐文章于 2024-07-01 16:18:09 发布

乐享极致

最新推荐文章于 2024-07-01 16:18:09 发布

阅读量1.1k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_44313745/article/details/118079939

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端使用浮动块（movable-view）实现背景图的添加，包括直接在元素上指定背景图片和通过CSS样式调整图片大小使其自适应。同时，详细讲解了设置pointer-events属性和CSS样式覆盖的方法。

摘要由CSDN通过智能技术生成

添加浮动块

  <movable-area class="movable-area">
    <movable-view class="movable-view" direction="all">
    </movable-view>
  </movable-area>
  .movable-area{
    pointer-events:none;// 这个属性设置为none,让所有事件穿透过去
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .movable-view{ 
  	pointer-events:auto;// 重设为auto,覆盖父属性设置
    height: 50px;
    width: 50px;
    background: red;
  }

对浮动块添加一个背景图样式icon

方法一：直接在前端中添加背景图

        <movable-view class="movable-view" direction="all" bindtap="look_cn" style="background-image:url('../../../image/icon/icon_chengnuo.png')">
        </movable-view>

方法二：在css样式中，添加背景图；但是图片的地址必须是远程服务器上的地址

  .movable-view{ 
  	pointer-events:auto;
    height: 50px;
    width: 50px;
    /* background:#AB956D; */
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background-image: url('http://img6.bdstatic.com/img/image/smallpic/PPT1215.jpg');
  }

对于图片的大小添加自适应

  .movable-view{ 
  	pointer-events:auto;
    height: 50px;
    width: 50px;
    /* background:#AB956D; */ // 为view 浮动块添加背景颜色
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background-image: url('http://img6.bdstatic.com/img/image/smallpic/PPT1215.jpg'); */
    background-repeat:no-repeat;  // 图片的大小自适应view 
    background-size:100% 100%; // 图片的大小自适应view 
    -moz-background-size:100% 100% // 图片的大小自适应view 
  }