最近感悟了一些CSS调试之类的总结，以及爬坑，希望能帮助到你

一、背景图片边框异常

痛点： 图片没有铺满，字体颜色以及位置在最左边，按钮没有圆滑效果
原图
image.png
修改后
image.png
解决代码

.yzmcode{
            background:url("../../assets/but-hqyzm.png") no-repeat center;
            margin-left: 0.625rem;
            text-align:center;
            background-size: 100%;
            flex: 1;
            color: #ffffff;
            width: 5.75rem;
            height: 2rem;
            border-radius: 0.3rem; // 圆滑效果
          }

二、背景图片常用元素

.body{ 
            background-image: url('${basepath}/resource/images/loginb1.jpeg'); 
            background-size: 100%; 
            background-repeat:no-repeat;
     }
css代码添加背景图片常用代码
　　1 背景颜色 {background-color:数值}
　　2 背景图片 {background-image: url(url)|none}
　　3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
　　4 背景固定 {background-attachment:fixed|scroll}
　　5 背景定位 {background-position:数值|top|bottom|left|right|center}
　　6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

三、两张图片重叠在一起显示效果

先看效果
image.png
**思路：**将兔子这个图片用作背景，再在标签里面插一张图片

<section class="nlbj-img">
   <img src="../../assets/ztgift.png" alt />
</section>

    // 兔子图片
    .nlbj-img {
      position: relative;
      width: 20.5rem;
      height: 16.5rem;
      margin-left: 2rem;
      // 中秋大礼包
      background: url("../../assets/icon-zqdlb.png") no-repeat center;
      background-size: contain;
      img {
        margin-left: 1.125rem;
        margin-top: 11.125rem;
        width: 16.5rem;
        height: 2.275rem;
      }
    }

图片背景和文字重叠

效果
image.png
html

<section class="ttaifish-m-hwnlbjz">
   <section>
     <img src="../../assets/hwbjz-moon.png" alt/>
     <section class="ttaifish-m-ui-btt">
       收集月饼 兑换中秋豪礼
     </section>
   </section>
</section>

css

.ttaifish-m-hwnlbjz {
    margin: 0 auto;

    img {
      margin-top: 17.325rem;
      width: 27.75rem;
      height: 5.75rem;
    }

    .ttaifish-m-ui-btt {
      text-align: center;
      font-style: oblique;
      font-size: 1.5rem;
      position: fixed;
      margin-left: 6%;
      margin-top: -1.65rem;
      width: 21.75rem;
      height: 2.55rem;
      background: url("../../assets/moon-time-bg.png") no-repeat center;
      background-size: contain;
      color: #F5EED1;
    }
  }

五、其他小样式

1、设置文本框内输入的文字距离左边一段距离

text-indent或者padding-left，后者可能会增加框的宽度

2、textarea背景透明和标记的去除

背景是自身的白色，我需要是透明的，就类似，textarea不存在，直接就是一些文字悬浮在背景板上，这时候需要在css样式中定义

background-color: transparent;

3、设置背景图像的起始位置

background-position:center;

4、规定背景图像的尺寸

background-size: length|percentage|cover|contain;
值描述
length第一个值设置高度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

5、margin-botto只在外面没有标签情况下才可用

6、位置定位

transform: translate(-100%, -0%);
position: absolute;

7、有时候居中失效可以用这个

justify-content: center;
display: flex;

8、如何解决移动端H5页面点击输入款页面放大

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">