背景透明文字透明、背景透明文字不透明的实现方法

本文链接：https://blog.csdn.net/qq_45863496/article/details/121358776

背景透明文字透明

css样式代码：
主要看：.table-box .tr .td-lable
设置css的透明属性opacity即可

        .table-box {
            width: 900px;
            height: 150px;
            border: 1px solid #CCCCCC;
            margin-top: 21px;
        }

        .table-box .tr {
            height: 50px;
            border: 1px solid #CCCCCC;
        }

        .table-box .tr .td-lable {
            width: 160px;
            background: #5BACF6;
            opacity: 0.1; /*背景透明，文字也透明*/
            /*background: rgba(91, 172, 246, 0.1);*/
            border: 1px solid #CCCCCC;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 50px;
            text-align: right;
        }

        .table-box .tr .td-input {
            width: 290px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 50px;
            position:relative;
        }

        .table-box .tr .td-input input {
            width: 240px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #CCCCCC;
            position:absolute;
            top:50%;
            left:50%;
            margin-top: -15px;
            margin-left: -120px;
        }

        input::-webkit-input-placeholder{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 50px;
        }

        .table-box .tr textarea {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
            width: 740px;
            height: 50px;
            border: none;
            overflow: hidden;
            resize:none;
            padding: 10px 25px;
        }

html代码：

<form style="margin-top: 69px">
            <table class="table-box">
                <tr class="tr">
                    <th class="td-lable">姓名：</th>
                    <td class="td-input">
                        <input type="text" placeholder="请输入姓名">
                    </td>
                    <th class="td-lable">性别：</th>
                    <td class="td-input">
                        <input type="text" placeholder="请输入性别">
                    </td>
                </tr>
                <tr class="tr">
                    <th class="td-lable">联系电话：</th>
                    <td class="td-input">
                        <input type="text" placeholder="请输入联系电话">
                    </td>
                    <th class="td-lable">职业：</th>
                    <td class="td-input">
                        <input type="text" placeholder="请输入职业">
                    </td>
                </tr>
                <tr class="tr">
                    <th class="td-lable">备注：</th>
                    <td colspan="3">
                        <textarea></textarea>
                    </td>
                </tr>
            </table>
        </form>

效果如下：
在这里插入图片描述

背景透明文字不透明

背景色使用透明色（利用rgba函数）

.table-box .tr .td-lable {
            width: 160px;
            /*background: #5BACF6;*/
            /*opacity: 0.1;*/
            background: rgba(91, 172, 246, 0.1);
            border: 1px solid #CCCCCC;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 50px;
            text-align: right;
        }