css 背景图像及其子元素的不透明度问题[重复]

yr9zkbsy 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(155)

此问题已在此处有答案：

Can I set an opacity only to the background image of a div?（8个回答）
3年前关闭。
我的标题问题，我不能得到周围。我上传了一个背景图像，我希望它的不透明度0.4。不幸的是，当我这样做，所有的子元素变得透明了。
下面是我尝试过的代码，但似乎不起作用。我在网上看到了一些RGBA的解决方案，但每个解决方案都有普通的背景颜色，我使用的是自定义背景。

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<link rel="stylesheet" href="style.css"/>

<div id="main" align="center">
    <div id="editable">
        <input v-model="text" maxlength="30">
        <p> {{ text }}</p>
    </div>
    <div id="root">
        <h1>
            {{message}}
        </h1>
        <button @click="ReverseMessage">Reverse Message</button>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>
    new Vue({
        el: "#editable",
        data: {
            text: 'You can edit me'
        }
    });
    new Vue({
        el: "#root",
        data: {
            message: 'THIS MESSAGE WILL GET REVERSED IF YOU CLICK THE BUTTON'
        },
        methods: {
            ReverseMessage() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
    Vue.config.devtools = true;

</script>
</body>
<style>
    #main {
        height: 609px;
        background-image: url('HHH.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.3;
    }

    #editable {

        opacity: 1;
    }

    #root {

        opacity: 1;
    }
</style>
</html>

https://imgur.com/5DxV1GW

css

来源：https://stackoverflow.com/questions/58305602/opacity-problem-with-background-image-and-its-child-elements

2条答案

按热度按时间

6jjcrrmo1#

您需要为背景图像创建一个单独的元素，并将其位置设置为absolute，将main的位置设置为relative。然后您可以删除其他元素上的不透明度。因此您的代码应该如下所示：

<style>
    #main {
        position: relative;
        height: 609px;
    }
    #background {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: url('HHH.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: initial;
        opacity: 0.4;
    }
</style>

<div id="main">
   <div id="background">
</div>

赞(0）回复(0）举报 2023-04-13

dgenwo3n2#

也许你可以在其他元素下面设置背景div的z索引。
它看起来像背景div是彼此重叠的。