title: DIv background Transparency
body: <p>There are multiple divs on my website and all have different background images loaded from different urls. I am using Javascript Dom. The opacity value of each div is dynamic.
  The problem is that there is a span element appended to each div. The span element is a tooltip displaying the name of the div on hover. If I give opacity using</p>
  
  <pre><code>    element.style.opacity = some_value;
  </code></pre>
  
  <p>The tooltip takes the same opacity as its background div, but the tooltip opacity should not change. Only the parent element's opacity should change. 
  This can be done using RGBA values if the div's background is a color. However, I have an image as background. Here is an example of what I am trying to do</p>
  
  <pre><code>    element=document.createElement('div');
      element.style.left= 150  + 'px';
      element.style.top= 300 + 'px';
      element.style.width=50 + 'px';
      element.style.height=50 + 'px';
      element.style.opacity = 0.5;
      element.style.backgroundImage ='url('url_Link_Address')';
      element.style.backgroundSize = 'cover';
      element.className='viewCls';
      tooltip = document.createElement('span')
      tooltip.className='tooltiptext';
      tooltip.innerHTML = 'Tooltip Text'
      element.appendChild(tooltip);
  </code></pre>
  
  <p>Can anyone suggest any way to solve this issue?
  Javscript and Jquery solutions are preferably.</p>
  
  <p>CSS</p>
  
  <pre><code>      .viewCls{
          position: absolute;
         }
  
        .viewCls.tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: #F2E9BD;
        color: #black;
        text-align: center;
        position: absolute;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        left: 100%;
        top: 30%;
        font-size: 13px;
        font-family: inherit;
        }
  
       .viewCls.tooltiptext {
       visibility: visible;
       opacity: 1;
     } 
  </code></pre>