如何制作白色按钮框？求助实现含按钮的白色容器效果

你遇到的问题根源在于使用opacity属性时，会让整个容器及其内部所有元素（包括按钮、输入框）都继承透明度，还可能引发交互层面的异常（比如输入内容丢失）。

正确的解决方式是给容器背景色使用rgba()值实现半透明，这样只有容器背景是半透明状态，内部的按钮、输入框等元素完全不受影响，能正常交互。

代码示例 #

HTML

<div class="white-transparent-box">
  <input type="text" placeholder="请输入内容" />
  <button>确认</button>
</div>

CSS

.white-transparent-box {
  /* 白色背景+0.8透明度，可根据需求调整最后一个数值（0-1） */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
  /* 可选：添加边框、阴影匹配图中样式 */
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.white-transparent-box input,
.white-transparent-box button {
  padding: 8px 14px;
  margin: 0 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.white-transparent-box button {
  background-color: #2196f3;
  color: #fff;
  border-color: #2196f3;
  cursor: pointer;
}

你可以根据图中的样式调整容器的尺寸、圆角、阴影，以及按钮的颜色，来达到完全匹配的效果。

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