移动端Web开发中使用CSS为子元素添加浅黑色半透明背景求助

解决方案 #

你需要修改容器宽度规则、给按钮外层增加半透明背景样式，同时清除浮动避免高度塌陷，修改后的完整代码如下：

修改后的CSS代码

body {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  color: orangered;
  text-align: center;
}

.experience {
  display: block;
  float: right;
}

.see-all {
  float: right;
  color: orangered;
  /* 新增半透黑背景和内边距 */
  background-color: rgba(0,0,0,0.5);
  padding: 8px 16px;
}

.choose-form {
  background-color: rgb(246, 229, 246);
  padding: 10px;
}

.orange {
  background-color: #f78336;
  /* 调整按钮字号适配360px宽度屏幕 */
  font-size: 18px;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
}

button {
  background-color: #f78336;
  font-size: 18px;
  color: white;
}

option {
  font-size: 10px;
}

select {
  height: 50px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 40px;
  padding: 10px;
}

/* 新增清除浮动类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

修改后的HTML代码

<!-- 把min-width:500px改成适配移动端的宽度规则 -->
<div class="card card-block mx-3" style="max-width: 100%;width: 360px;height: 100%;margin: 0 auto;">
  <div class="mt-5" style="text-align: center;padding:10px;position: relative;">
    <!-- 图片设置宽度100%适配容器 -->
    <img src="https://i.ibb.co/zQ6pBdV/Report-1.png" alt="Report-1" border="0" style="width: 100%;display: block;">
    <div style="background-color:rgba(129,254,188,0.5); position:absolute;bottom: 10px;left: 10px;right:10px;" class="clearfix">
      <p style="margin: 0;padding: 8px 12px;">
        <span style="float: left; margin-top:9px;color: white; font-size: 16px;">₹999/min</span>
        <span class="see-all"> 
          <button type="submit" class="btn btn-warning orange">Buy Now </button>
        </span>
      </p>
    </div>
  </div>
</div>

修改说明 #

• 移除了原外层容器固定的min-width:500px规则，替换为适配360px宽度的响应式规则，避免移动端横向溢出
• 给.see-all类增加了rgba(0,0,0,0.5)的半透明黑色背景，同时增加内边距实现预期的按钮后方半透黑效果
• 调整了按钮字号、增加清除浮动类，避免浮动元素导致的高度塌陷问题
• 把底部信息条从margin负值定位改成absolute相对父容器定位，适配不同屏幕高度时不会出现位置偏移

内容的提问来源于stack exchange，提问作者user14186487