记录：background-size、mailto、background-i

 

 //background-size 属性规定背景图像的尺寸。
 div {
       background-image: url('img_l.png');
       background-size: contain;
       width: 50px;
       height: 50px;
      }
 //mailto邮箱
 　　<a href="mailto:<email>">邮箱地址</a>
 //模板中的样式
 :style="{
　　backgroundImage: `url(${item.thumbnail})`,
 　  backgroundPositionX: `${-(20 * item.offsetX)}px`,
　　backgroundPositionY: `${-(20 * item.offsetY)}px`,
 }"

 

• background-size：100%;总是X轴100%铺满整个容器，Y轴可能被裁剪会出现空白填不满部分，图片不变形。
• background-size：100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
• background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
• background-size：contain;图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。

详细可参照此位大佬博客https://www.cnblogs.com/tugenhua0707/p/5260411.html（超级无敌详细）