html - 不透明度影响文本的 HTML CSS 背景图像

问题描述

我正在做一个带有文本框的联系页面供用户输入。我想要一个具有不透明度的背景，但是每当我编写代码时，不透明度也会影响文本框和文本。如何在不影响文本和文本框的情况下更改背景图像的不透明度。我认为我的代码是错误的，因为我也无法在文本框中输入内容谢谢

<style>
    /*-------------------------------------------------------------------*/
    /* -------------------------- CONTACT Page ---------------------------- */
    /*-------------------------------------------------------------------*/
    * {
        box-sizing: border-box;
        font-family: "Timeless", serif;
    }

    body {
        background-color: #3d8291;
        color: white;

    }

    .con-con {
        position: relative;
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .con-con::before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background-image: url(assets/contact-bg.jpg);
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: cover;
    }

</style>

HTML

<body>
<!-- ..............CONTACT.................. -->
<section class="contact-container">
    <div class="con-con">
    <div class="page-header">
        <br><br> <br> <br><br><br><br>
        <h1>CONTACT
        </h1>
        <!--<hr style="background: white;">-->
    </div>
    <div class="contact-page">
        <div class="contact-1">
            <label for="Name">Name</label>
            <input type="text" aria-label="First name" class="form-control">
            <label for="Email">Email</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            <label for="Message">Message</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                style="height:200px"></textarea>
            <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="button"
                autocomplete="off">Send</button>
        </div>
        <div class="contact-2">
            <p>You can contact <strong>FEU Institute of Technology</strong> <br>using the form to your left,
                alternatively you can use <br>the links below:</p>
            <div class="icon"><i class="fab fa-facebook fa-lg"></i><a href="https://www.facebook.com/feueac"
                    target="_blank">https://www.facebook.com/feueac</a><br></div>
            <div class="icon"><i class="fas fa-phone fa-lg"></i>(02) 8281 8888<br></div>
            <div class="icon"><i class="fas fa-address-card fa-lg"></i>P. Paredes St., Sampaloc, Manila 1015<br>
            </div>
            <div class="contact">
                <div class="contact-map">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3860.911466682785!2d120.98643601469698!3d14.604118989800224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c9f8b14eb259%3A0xad4d12caac9a068e!2sFEU%20Institute%20of%20Technology!5e0!3m2!1sen!2sph!4v1626252116569!5m2!1sen!2sph"
                        width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
</section><br><br><br>
<!-- ...........................................................END OF CONTACT...................................................... -->
<script src="js/index.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

标签： htmlcss

html - 不透明度影响文本的 HTML CSS 背景图像

问题描述

解决方案

推荐阅读