Transparenz: opacity

  
    div.bg {
      background-repeat:no-repeat;
      background-position:0px 0px;
      background-image: url(fu.jpg);
      background-size: 100%;
    }
    div.trans{
      background-color: #eeeeee;
      border: 1px solid #000;
      padding: 30px;
      margin: 30px;
      width: 300px;
      border-radius: 10px;
      box-shadow: 10px 10px 14px #999999;
    }
    div.trans:nth-child(1) {
      opacity: 0.75;
    }
    div.trans:nth-child(2) {
      opacity: 0.5;
    }
    div.trans:nth-child(3) {
      opacity: 0.25;
    }
    div.trans:hover {
      opacity: 1;
      color: red;
    }
  
  
    <div class="bg">
      <div class="trans">
        <code>opacity: 0.75;</code>
      </div>
      <div class="trans"">
        <code>opacity: 0.5;</code>
      </div>
      <div class="trans">
        <code>opacity: 0.25;</code>
      </div>
    </div>
  
opacity: 0.75;
opacity: 0.5;
opacity: 0.25;

zurück vor

Quellen: W3C (opacity)