Question

我正在尝试查看黑色文字说明。由于某种原因，我可以看到白色标题，但是找不到黑色说明。我想进行这种不断变化的不透明度值。如何进行？试图使描述z-index很高。

.imagesidecaption {
      border-color: blue;
      border-style: solid;
      border-width: 1px;
      background-color: #ffffff;
      opacity: 1;
  }

  .imagesidecaptionfulltext {
      background-color: #000000;
      opacity: .2;
      height: 100%;
  }

  .imagesidecaptiontitle {
      color: white;
  }

  .imagesidecaptiondescription {
      color: black;
      z-index : 4;
  }

<span class="imagesidecaptioncontainer">
    <div class="imagesidecaption" style="width: 280.00px; height: 140px;">
        <div class="imagesidecaptionfulltext" id="imagesidecaptionfulltextid2">
            <div class="imagesidecaptiontitle" id="imagesidecaptiontitleid">White text<br></div>
            <div class="imagesidecaptiondescription" id="imagesidecaptiondescriptionid">Description: Would like to see Black Text description</div>
        </div>
    </div>
</span>

Answer 1

代替

background-color : #000000;
opacity : 0.2;

您可以使用background-color: rgba(0,0,0,0.2);

.imagesidecaption {
    border-color: blue;
    border-style: solid;
    border-width: 1px;
    background-color: #ffffff;
    opacity: 1;
}

.imagesidecaptionfulltext {
  /* background-color : #000000; 
     opacity : 0.2 
   */
    background-color: rgba(0,0,0,0.2);
    height: 100%;
}

.imagesidecaptiontitle {
    color: white;
}

.imagesidecaptiondescription {
    color: black;
    opacity : 1;
    position :absolute;
    z-index : 5;
    
}

<span class="imagesidecaptioncontainer">
     <div class="imagesidecaption" style="width: 280.00px; height: 140px;"> 
           <div class="imagesidecaptionfulltext" id="imagesidecaptionfulltextid2"> 
               <div class="imagesidecaptiontitle" id="imagesidecaptiontitleid">White Title <br></div><div class="imagesidecaptiondescription" id="imagesidecaptiondescriptionid">Description: Would like to see Black Text description</div></div></div></div></span>

Answer 2

不是z-index引起您的问题，而是不透明性从父级传递到子级。因此，您的“黑色”文本是从外部父级继承Microsoft Windows [Version 10.0.16299.1029] (c) 2017 Microsoft Corporation. All rights reserved. C:\Users\jeff>path PATH=C:\Python37\Scripts\;C:\Python37\;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\libnvvp;C:\oracle\product\11.2.0\client_1\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\app\jefforacle\product\12.1.0\client_1\bin;c:\jdk8u72\jdk1.8.0_72\bin;C:\ProgramData\Oracle\Java\javapath;C:\apache-maven-2.0.9\bin;C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin;C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE;C:\Program Files (x86)\WinZip;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;L:\prj\defaults\code\bin;f:\apps\exec;L:\Prj\JavaDflts\code\BIN;C:\Program Files (x86)\AccuRev\bin;C:\Program Files (x86)\WinMerge;c:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files\doxygen\bin;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;c:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Users\jeff\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files (x86)\Microsoft Emulator Manager\1.0\;C:\Program Files\MariaDB 10.1\lib;C:\Program Files\PuTTY\;C:\Program Files\Git\cmd;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Gradle\gradle-5.4.1\bin;C:\Program Files (x86)\nodejs\;C:\Users\jeff\AppData\Local\Android\Sdk\tools;C:\Users\jeff\AppData\Local\Android\Sdk\tools\bin;C:\Users\jeff\AppData\Local\Android\Sdk\platform-tools;;C:\Program Files\Microsoft VS Code\bin;C:\Python37\Scripts\;C:\Python37\;C:\Users\jeff\AppData\Local\Microsoft\WindowsApps;C:\Users\jeff\AppData\Local\GitHubDesktop\bin;C:\Users\jeff\AppData\Roaming\npm C:\Users\jeff>where node INFO: Could not find files for the given pattern(s).。您需要重新构造元素，以消除父级的不透明性，或将子级移出。

HTML CSS：显示不透明层为黑色的文本

2 个答案: