文章/答案/技术大牛

发布

社区首页 >问答首页 >不透明度影响文本的HTML CSS背景图像

问不透明度影响文本的HTML CSS背景图像
EN

Stack Overflow用户

提问于 2021-07-16 13:24:11

回答 4查看 116关注 0票数 0

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

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

html

css

回答 4

Stack Overflow用户

发布于 2021-07-16 13:27:40

您可以使用以下代码background-color:rgba(0,0,0,0.5);，而不是使用Opacity。

票数 0

Stack Overflow用户

发布于 2021-07-16 13:35:29

您需要在.con-con::before中添加以下内容

z-index: -10;

当你的图像和文本具有相同的z索引时，它将确保它工作。图像的显示优先级高于文本，并且z索引将文本置于图像之上

此外，您不能添加文本框中的文本，因为您给它的高度为200px，这是错误的

您可以通过添加更多列来增加文本框高度，这样做可以在文本框中输入文本

票数 0

Stack Overflow用户

发布于 2021-08-17 03:35:23

如果您希望在不影响文本或输入的情况下使用不透明度，请尝试此选项。

.contact-page{
   background: rgba(255, 254, 254, 0.8);
}

最后一个参数(0.8)代表不透明度: 0.8；

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68403823

复制

相似问题

问不透明度影响文本的HTML CSS背景图像
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不透明度影响文本的HTML CSS背景图像EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不透明度影响文本的HTML CSS背景图像
EN