如何從盒子中移除這個黑色陰影？-有解無憂

我有個問題。你能幫我，我怎樣才能從字母中修復這個黑色陰影，讓它看起來像其他字母？伙計們:)

正如您在某些字母中看到的那樣，H、V、A 和 W 周圍有一個黑框，它們在閃爍，看起來像霓虹燈。希望你能幫助我。

HTML

<body>
    <div class="header">
    <h1 class="nav-name">Villains WorldWide</h1>
        <nav>
            <ul class="nav-left">
                <li><a href="#">Shop</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
        <a href="#" class="nav-right"><button>Contact</button></a>
    </div>
    <div class="main">
        <h1 class="neon" data-text="U">T<span class="flicker-fast">H</span>IS IS&nbsp;<span class="flicker-slow">V</span>ILL<span class="flicker-slow">A</span>INS WORLD<span class="flicker-fast">W</span>IDE</h1>
        <img src="Media\VillainsWorldWide_GIF_LOGO_Animation.gif" alt="VillainsWorldWideLogo" class="logo">
    </div>
    <script src="script.js"></script>
</body>

CSS

* {
    background-color: black;
}

.neon {
    font-size: 60px;
    display: flex;
    justify-content: center;
    padding-top: 75px;
    color: #FFD5FF;   
    top: 50%;
    left: 50%;
    translate: (-50%, -50%);
    text-shadow: 1px 0px 4px #FFD5FF, 2px 0px 4px #FFD5FF, 3px 0px 4px #FFD5FF, 2px 0px 3px #D42CCA, 2px 3px 15px #D42CCA, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #D42CCA,40px 0vw 200px #D42CCA;
    letter-spacing: 8px;
}

    
.flicker-slow{
    animation: flicker 3s linear infinite;
    text-decoration: none;
  }
  
  .flicker-fast{
    animation: flicker 1s linear infinite;
    text-decoration: none;
  }

  @keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
    
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
    }
  }

uj5u.com熱心網友回復：

我編輯了我的答案以包含正確的解決方案，現在我認為這很好......只需添加background-color: transparent; 到類flicker-slow和flicker-fast，像這樣：

.flicker-slow{
    background-color: transparent;
    animation: flicker 3s linear infinite;
    text-decoration: none;
  }
  
  .flicker-fast{
    background-color: transparent;
    animation: flicker 1s linear infinite;
    text-decoration: none;
  }

隨著這個改變黑色陰影應該消失，看看： https ://jsfiddle.net/yagobiermann/Lk1m6qr9/49/

uj5u.com熱心網友回復：

我認為這是因為 span 元素從 *. 嘗試在你的 CSS 中添加一些類似的東西

span{
  background-color:transparent;
}

uj5u.com熱心網友回復：

達洛答對了。我也認為你可以嘗試改變你的 span 屬性。

     <!-- language: lang-css -->
       span {
          background-color: transparent;
        }
    <!-- end snippet -->

這是一篇關于 CSS 級聯命令的文章，這可能會有所幫助。 https://www.w3.org/TR/CSS21/cascade.html#cascade https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span Span 標簽已經是一個行內容器，用于樣式或分組內容/元素。不過，你的閃爍看起來很引人注目。很不錯。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455027.html

標籤：html css

上一篇：使用CSS繪制兩個圓圈，它們之間有一條線-外圈變形

下一篇：React-列出具有不同引數的圖示