Page Widget How to - Set background opacity

Question

We would like to know how to set background opacity.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body, .wrapper {<!--from www .  j  a  va 2  s . co m-->
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  position: relative;
}

.wrapper:after {
  content: "";
  background-image:
    url("http://placehold.it/100x800");
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: .4;
}

.inner {
  width: 40%;
  margin: auto;
  padding: 20px 10px;
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur
      adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do eiusmo.Lorem ipsum dolor sit
      amet, consectetur adipisicing elit, sed do eiusmod.</div>
  </div>
</body>
</html>

The code above is rendered as follows: