移动端background 照片不铺满的处理

红豆黄豆小甜豆

已于 2023-02-01 20:38:00 修改

阅读量931

点赞数

文章标签： html css html5 css3

于 2023-02-01 20:34:02 首次发布

本文链接：https://blog.csdn.net/weixin_60035749/article/details/128840147

版权

不平铺的效果：

 

background背景为图片的不平铺的处理：
html代码

<div class="my-box-style"  :style="{ 'backgroundImage': templateUrl ? 'url('+templateUrl+')' : '' }" >

</div>

css 代码

.my-box-style {
  position: relative;
  width: 622*$w;
  height: 359*$w;
  margin: 0 auto;
  padding: 32*$w;
  background: url('../img/card-bg.png') center center no-repeat;
  // background-size 属性表示把 backgroundImage 设置为铺满
  background-size: cover;
  border-radius: 16*$w;
  margin-bottom: 20*$w;
  margin-top: 32*$w;
}

最终效果：