0

I am heading a problem that i cannot get around with. I have uploaded a background image and i want its opacity 0.4. Unfortunately when i do this all it's child elements get transparent too.

Below is the code that i have tried but seems like not working. I saw some solutions online with RGBA but each of them had plain background color and i am using a custom background.

<!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://i.stack.imgur.com/GeRGV.jpg

Kevin
  • 1,152
  • 5
  • 13
  • Can you please post a minimal reproducible example? – alesssz Oct 09 '19 at 13:51
  • I have posted the image there with link, i cannot upload it because i dont have 10 reputation yet. @alesssz – Kevin Oct 09 '19 at 13:54
  • #main { height: 609px; position: relative; } #main:after { content:''; background-image: url('HHH.jpg'); background-repeat: no-repeat; background-size: cover; background-position: initial; position:absolute; top:0; left:0; right:0; bottom: 0; opacity: 0.4; } #editable{ z-index: 1; } #root{ z-index: 1; } – Prakash Rajotiya Oct 09 '19 at 14:04
  • Can you add: #main {height: 609px; position: relative;} #main:after {content:''; position: absolute;top:0;left:0;width:100%;height:100%;background-image: url('HHH.jpg');background-repeat: no-repeat;background-size: cover;opacity: 0.3;} – Van Pham Oct 09 '19 at 14:14

2 Answers2

-1

You'll need to create a separate element for the background image and set its position to absolute, and main's position to relative. You can then remove the opacity on the other elements. So your code should look like this:

<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>
Jay Kariesch
  • 1,392
  • 7
  • 13
-1

Maybe you can set the z-index of the background div below the other elements.

It looks like the background div is laying on top of each other.

#background
{
  z-index: -2;
}
halfer
  • 19,824
  • 17
  • 99
  • 186
davidev
  • 7,694
  • 5
  • 21
  • 56