0

我正在开发一个屏幕尺寸为360 X 640的移动 Web 应用程序。 我无法应用透明/黑色背景，如图“立即购买”按钮后面的图所示。我使用了绝对定位和相对定位。有人可以帮我解决这个问题吗？我尝试使用不透明度，但它不能按我的意愿工作。

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;
}

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

.orange {
  background-color: #f78336;
  font-size: 30px;
  color: white;
}

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

option {
  font-size: 10px;
}

select {
  height: 50px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 40px;
  padding: 10px;
}
<div class="card card-block mx-3" style="min-width: 500px;height: 100%;">
  <div class="mt-5" style="text-align: center;padding :10px;">
    <img src="https://i.ibb.co/zQ6pBdV/Report-1.png" alt="Report-1" border="0">
    <div style="background-color:rgba(129,254,188,0.5); position:relative ; margin-top:-90px;">
      <p><span style="float: left; margin-top:9px;color: white; ">₹999/min</span>

        <span class="see-all"> 
  <button type="submit" class="btn btn-warning orange">Buy Now </button>
  </span> </p>
    </div>
  </div>
</div>
我想要的是

在此处输入图像描述

我的前端

在此处输入图像描述

4

2 回答 2

0

您的背景 div 的高度为零，设置高度将导致透明背景变得可见（我添加height: 70px到 HTML 中）：

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;
}

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

.orange {
  background-color: #f78336;
  font-size: 30px;
  color: white;
}

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

option {
  font-size: 10px;
}

select {
  height: 50px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 40px;
  padding: 10px;
}
<div class="card card-block mx-3" style="min-width: 500px;height: 100%;">
  <div class="mt-5" style="text-align: center;padding :10px;">
    <img src="https://i.ibb.co/zQ6pBdV/Report-1.png" alt="Report-1" border="0">
    <div style="background-color:rgba(129,254,188,0.5); position:relative ; margin-top:-90px; height:70px;">
      <p><span style="float: left; margin-top:9px;color: white; ">₹999/min</span>

        <span class="see-all"> 
  <button type="submit" class="btn btn-warning orange">Buy Now </button>
  </span> </p>
    </div>
  </div>
</div>

于 2021-09-26T11:43:39.533 回答
0

当您使用float它时，它会从页面的正常流程中删除一个元素。因为你的元素里面的<div>背景不透明度正在使用float，所以元素没有高度。要解决此问题，请设置高度或使用 clearfix：

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

这是一个很好的答案，解释了什么是 clearfix （以及为什么你应该尽量避免使用 float ，因为有更好的替代方案可用）

Clearfix 应用于您的代码：

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;
}

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

.orange {
  background-color: #f78336;
  font-size: 30px;
  color: white;
}

button {
  background-color: #f78336;
  font-size: 30px;
  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: block; 
   height: 0; 
   clear: both;
}
<div class="card card-block mx-3" style="width: 500px;height: 100%;">
  <div class="mt-5" style="text-align: center;padding :10px;">
    <img src="https://i.ibb.co/zQ6pBdV/Report-1.png" alt="Report-1" border="0" style="width: 100%">
    <div class="clearfix" style="background-color:rgba(129,254,188,0.5); position:relative ; margin-top:-90px; padding: 23px">
      <span style="float: left; margin:0;color: white; ">₹999/min</span>
      <span class="see-all">
        <button type="submit" class="btn btn-warning orange">Buy Now </button>
      </span>
    </div>
  </div>
</div>

于 2021-09-26T11:50:06.910 回答