Question

我是html的新手，但是我想拥有透明的背景图像，并且体内有div容器，这些容器只是不透明地显示背景图像。

Answer 1

我想说的是“相反”，但我确实需要更多信息（或示例）。

如果您使用了一张背景图片并为可以看到该图片的div设置了特定的类，那么您能否获得想要的效果？

CSS示例：

html body { background-image: url("myimage.jpg"); }
div { background: #FFFFFF; }
.peek { background: transparent; }

HTML示例：

<body>
<div> section with white background (blocks the background image), contains text </div>
<div class="peek"> section that exposes the background image, reveals different aspects of the background when the page is scrolled </div>

请让我知道我是否了解您的目标。

Answer 2

据我了解，您正在寻找这样的东西：

<style>
    * {
        color: white;
    }

    .background {
        width: 100%;
        height: 100%;

        position: relative;

        background-image: url('https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

        .side {
            width: 20%;
            height: 100%;
            position: relative;
            display: inline-block;
            float: left;

            background-color: red;
        }

        .main {
            width: 60%;
            height: 100%;

            position: relative;
            display: inline-block;
            float: left;

            background-color: transparent;
        }

            .top, .spacer, .bottom {
                width: 100%;
                height: 20%;
                position: relative;
                display: inline-block;
                float: left;

                background-color: red;
            }

            .content {
                width: 100%;
                height: 20%;
                position: relative;
                display: inline-block;
                float: left;
            }

            .section-one {
                background-color: rgba(0,0,0,0.5);
            }
            .section-two {
                background-color: rgba(0,0,0,0.25);
            }
</style>

<div class="background">

    <div class="side">THIS IS WHITE</div>

    <div class="main">

        <div class="top">THIS IS WHITE</div>

        <div class="content section-one">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>

        <div class="spacer">THIS IS WHITE</div>

        <div class="content section-two">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>

        <div class="bottom">THIS IS WHITE</div>

    </div>

    <div class="side">THIS IS WHITE</div>

</div>

透明背景图片，但不透明div容器

2 个答案: