How to add opacity only to the image?

Navigation
0

A snippet speaks more than a thousand words: 

body {
    padding-top: 11%;
    background: url(https://fakeimg.pl/1920x1920/);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divclass="container">
    <form class="form-horizontal" method="post" action="login.php">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h2>Entrar</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group has-danger">
                    <label>Digite seu e-mail</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="text" name="email" class="form-control" id="email"
                               placeholder="[email protected]" required autofocus>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Digite sua senha</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="password" name="password" class="form-control" id="password"
                               placeholder="********" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" style="padding-top: .35rem">
                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                    <label class="form-check-label">
                        <input class="form-check-input" name="remember" type="checkbox" checked="checked">
                        <span style="padding-bottom: .15rem">Lembrar-me</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" style="padding-top: 1rem">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <button type="submit" class="btn btn-info"><i class="fa fa-sign-in"></i> Login</button>
            </div>
        </div>
    </form>
</div>
</body>

Please note that on this login page I have a simple form with a background image, inserted through CSS by background url .

However when trying to add opacity only in the image, with the code below, the entire form loses its opacity, and the image itself does not lose: 

body {
    padding-top: 11%;
    background: url(https://fakeimg.pl/1920x1920/);
    opacity: 0.5;
}


body {
    padding-top: 11%;
    background: url(https://fakeimg.pl/1920x1920/);
    opacity: 0.5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divclass="container">
    <form class="form-horizontal" method="post" action="login.php">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h2>Entrar</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group has-danger">
                    <label>Digite seu e-mail</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="text" name="email" class="form-control" id="email"
                               placeholder="[email protected]" required autofocus>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Digite sua senha</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="password" name="password" class="form-control" id="password"
                               placeholder="********" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" style="padding-top: .35rem">
                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                    <label class="form-check-label">
                        <input class="form-check-input" name="remember" type="checkbox" checked="checked">
                        <span style="padding-bottom: .15rem">Lembrar-me</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" style="padding-top: 1rem">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <button type="submit" class="btn btn-info"><i class="fa fa-sign-in"></i> Login</button>
            </div>
        </div>
    </form>
</div>
</body>

I also tried to add the opacity next to the background url , however it was not recognized and deleted the image: 

background: url(https://fakeimg.pl/1920x1920/) opacity: 0.5;

So how can I get the background image of the body with little opacity and keep the text with full opacity?

    
asked by anonymous 31.10.2017 / 16:56

3 answers

4

This is occurring because if you directly inform the element that it must have an opacity, all of your heirs will receive this same opaque style, eg 

.pai-opaco {
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);

  width:200px;
  height:200px;
  opacity: 0.5;
}

.filho-opaco {
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
}
<div class='pai-opaco'>
  <div class='filho-opaco'>
      

  </div>
</div>

For this to happen, there is more than one solution, I believe the default is to use the pseudo selector after , to indicate that this style must be added 'após' , element thus not inheriting in its children, in others words, the child receives the inheritance from the parent but then the parent receives another property that is not passed on to the children, and also add their respective opacity instructions, as shown in the following example: 

body::after {
content: "";
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
background-repeat: no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.container {
  width:200px;
  height:200px;
  top:0px;
  left:0px;
  position: absolute;
  background-color:#000;
  background: url(https://cms-assets.tutsplus.com/uploads/users/71/courses/1040/preview_image/css-1.png);
}
<div class="container">
    
</div>

Notice that the body background is opaque, while the .container element, even though it is an heir, is not opaque.

Comments:

IE versions lower than version 6 do not support this selector.

Sources:

link

link

link

    
31.10.2017 / 17:09
1

You can get this effect using after , example ... 

div {
  width: 100%;
  height: 100vh;
  position: relative;
}
span{
color: red;
}
div::after {
  content: "";
  background: url(https://fakeimg.pl/300/);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
<div>
  <label>Nome: </label>
  <input type="text">
  <span>teste exemplo</span>
</div>

Reference: CSS-tricks

    
31.10.2017 / 17:09
1

Take a look at the codepen I made for your case with the opacity property in background-images .

You can see that the opacity property is only applied to the background image, while the elements above it do not have opacity. 

@import "compass/css3";
@import url('https://fonts.googleapis.com/css?family=Anton');

* { box-sizing: border-box; margin: 0; padding:0; }

html {
  background: #12292b;
  font-family: 'Helvetica Neue', Arial, Sans-Serif;  
}
.background {
    background: #060a11;
    overflow: hidden;
    width: 50%;
    z-index: -1;
}
.background:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    opacity: 0.2;
    background-image: url('http://s3.thingpic.com/images/QS/AMR4zB4KLosYFsFd6U7TVnGr.jpeg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
.background2 {
    background: #060a11;
    overflow: hidden;
    width: 50%;
    z-index: -1;
}
.background2:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    background-image: url('http://s3.thingpic.com/images/QS/AMR4zB4KLosYFsFd6U7TVnGr.jpeg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
.opacity {
 background-color: #fff;
 font-family: 'Anton', sans-serif;
 text-align: center;
 color: #004d4d;
 width: 50%;
 margin-top: 3%;
 border-right: 1px solid #004d4d;
}
.opacity2 {
 background-color: #fff;
 font-family: 'Anton', sans-serif;
 text-align: center;
 color: #004d4d;
 margin-left: 50%; 
 margin-top: -3.8%;
 border-left: 1px solid #004d4d;
}
<div class="background"></div>
<div class="opacity">Background con opacity</div>
<div class="background2"></div>
<div class="opacity2">Background sin opacity</div>

To view the source code, click on the > CodePen - Background Opacity CSS only

    
31.10.2017 / 20:47
Incorrect Print Values How to replace the comma