DIv 背景透明度

Question

我的网站上有多个 div，并且都有从不同网址加载的不同背景图片。我正在使用 Javascript Dom。每个 div 的不透明度值是动态的。问题是每个 div 后面都附加了一个 span 元素。 span 元素是一个工具提示，在悬停时显示 div 的名称。如果我使用

赋予不透明度

    element.style.opacity = some_value;

工具提示采用与其背景相同的不透明度 div，但工具提示的不透明度不应改变。只有父元素的不透明度应该改变。如果 div 的背景是一种颜色，这可以使用 RGBA 值来完成。但是，我有一个图像作为背景。这是我正在尝试做的一个例子

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

谁能提出解决这个问题的方法？ Javscript 和 Jquery 解决方案是首选。

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

Answer 1

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

所以，我创建了一个容器来包含这两个元素。不透明度应仅应用于图片。因为一个元素中包含的所有元素的不透明度不能超过 100%，所以它们看起来总是褪色的。

现在，您需要努力 CSS（因为您没有向我们展示任何东西），让您的工具提示正确对齐到您想要的位置，您应该没问题。

DIv 背景透明度

DIv background Transparency

html

javascript

css

jquery

opacity