How to add opacity only to the image?

Asked

Viewed 4,370 times

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>
<div class="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>

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 whole form loses 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>
<div class="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 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 completely opaque?

html css

3 answers

4


This is happening because if you directly inform the element that it must have an opacity, all its heirs will receive this same opaque style, example:

.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 not to occur, there is more than one solution, I believe the default is to use the pseudo selector after, to indicate that this style should be added 'após', such element not inheriting in its children, in other words, the son receives the inheritance from the father but then the father receives one more property that is not passed to the children, and also add their respective instructions of opacity, 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>

Note that the background of body is opaque, while the element .container, even though he is heir, he is not opaque.

Remarks:

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

Sources:

http://maujor.com/tutorial/seletores_css21_parte3.php

https://www.w3schools.com/css/css_image_transparency.asp

https://www.w3schools.com/cssref/sel_after.asp

1

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

You can see that the property opacity it is applied only to the background image, in how much the elements that ficão over has 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 enter the link > Codepen - Background Opacity CSS only

1

You can get this effect by 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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.