DIv 背景透明度答案

【问题标题】：DIv background TransparencyDIv 背景透明度
【发布时间】：2018-02-12 11:13:33
【问题描述】：

我的网站上有多个 div，并且都有从不同 url 加载的不同背景图像。我正在使用 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);

任何人都可以提出任何解决此问题的方法吗？最好是 JavaScript 和 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;
   }

【问题讨论】：

@freedomn-m 不，它不继承......但是由于容器不是不透明的，所以孩子们不可能。如果继承了不透明度，则跨度将更加透明。
无论您如何生成 HTML 和 CSS，这都是您面临的 CSS“问题”。我认为这是一个很好的答案：stackoverflow.com/questions/17134929/…
您肯定需要将元素分开，因为半透明父级（css 不透明度）中的元素也将是半透明的。在这种情况下，无法让它们完全可见。
@Salketer 感谢您的确认/提醒。我不是 100% 确定，因此只有一个评论并且“应该能够”。它“有点”继承，但不是以可覆盖的方式。我删除了我的评论（关于设置工具提示不透明度）。
.viewCls.tooltiptext 以一个同时具有两个类的对象为目标，我想你想将它们分开。

标签： javascript jquery html css opacity

【解决方案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（因为您没有向我们展示任何内容），以使您的工具提示正确对齐您想要的位置，您应该没问题。

【讨论】：

很难理解你想要什么。此答案针对您的第一个问题，即“没有内容透明度的背景透明度”。如果您正在尝试实现其他目标，请使用相关信息创建另一个问题。
实际上你的解决方案做了一些调整。谢谢@Salketer