Bootstrap Input 透明背景：CSS opacity 與 background-color 透明度設置

需求

頁面背景為圖片，希望 Bootstrap `` 背景透明，與圖片融合。

方案一：背景色透明（推薦，不影響文字可讀性）

.form-control-transparent {
    background-color: transparent !important; /* 覆蓋 Bootstrap 默認白背景 */
    border: 1px solid rgba(255,255,255,0.5); /* 可選：半透明邊框 */
    color: #fff; /* 文字顏色配合深色背景 */
}

HTML：

<input type="text" class="form-control form-control-transparent" placeholder="透明輸入框">

方案二：整體透明度（含文字、邊框均變淡，慎用）

.input-opacity-50 {
    filter: alpha(opacity=50); /* IE8- */
    -moz-opacity: 0.5;        /* 老 Firefox */
    opacity: 0.5;             /* 標準 */
}

缺點：`opacity` 會使**子元素（文字、光標）同樣半透明**，降低可讀性。

方案三：RGBA 背景色（精確控制透明度）

.form-control-rgba {
    background-color: rgba(255, 255, 255, 0.2); /* 白色 20% 不透明度 */
    border-color: rgba(255, 255, 255, 0.4);
}

最佳實踐建議

• 優先用 background-color: transparent 或 rgba()，**避免 `opacity` 作用於整個輸入框**。
• 配合 `` 父容器背景圖，確保對比度達到 WCAG AA（文字 4.5:1）。
• 若需 placeholder 也透明：::placeholder { color: rgba(255,255,255,0.7); }。