DIv background Transparency

Question

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

    element.style.opacity = some_value;

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

    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);

Can anyone suggest any way to solve this issue? Javscript and Jquery solutions are preferably.

CSS

      .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;
   }

@freedomn-m nope, it does not inherit... But since the container is not opaque, there is no way the children could be. If the opacity was inherited, the span would by even more transparent. — Salketer, Sep 04 '17 at 08:50
No matter how you generate your HTML and CSS it's a CSS "issue" you're facing. And I think a good answer for it is here: https://stackoverflow.com/questions/17134929/overlay-a-background-image-with-an-rgba-background-color — caramba, Sep 04 '17 at 08:56
You definitely need to separate your elements as elements inside semi-transparent parent (css opacity) will be semi-transparent too. No way to make them completely visible in this case. — Anarion, Sep 04 '17 at 09:13
@Salketer thanks for the confirmation/reminder. I wasn't 100% sure hence only a comment and 'should be able to'. It "sort of" inherits, but not in an overridable manner. I've removed my comment (regarding setting tooltip opacity). — freedomn-m, Sep 04 '17 at 11:26
.viewCls.tooltiptext targets an object that has both classes, I think you'd want to seperate them. — Salketer, Sep 05 '17 at 06:33

score 0 · Accepted Answer · answered Sep 04 '17 at 08:54

container=document.createElement('div');
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.position='hotspot';
tooltip = document.createElement('span')
tooltip.className='tooltiptext';
tooltip.innerHTML = 'Tooltip Text'
container.appendChild(element);
container.appendChild(tooltip);

So, I've created a container to contain both elements. The opacity should be applied to the picture only. Because what happens is that ALL elements that are contained in an element cannot have more than 100% opacity, so they will always look faded.

Now, you'll need to work out on your CSS (since you didn't show us anything) to have your tooltip align correctly where you wanted and you should be fine.

It is very hard to understand what you'd want. This answer was aimed at your first problem, which was "background transparency without content transparency". If you are trying to achieve something else, please create another question with the related information. — Salketer, Sep 05 '17 at 06:33
Actually your solution worked with a few tweaks.Thanks @Salketer — Rohit Srivastava, Sep 06 '17 at 10:55

DIv background Transparency

1 Answers1