如何使导航栏透明优化按

Posted 2023-03-06

【中文标题】如何使导航栏透明优化按

【英文标题】：How to make navigation bar transparent optimize press

【发布时间】：2016-12-22 10:02:43

【问题描述】：

我正在使用 wordpress，使用优化新闻插件。我正在尝试使导航为白色的顶部栏变得透明。

我最初尝试的是使用将条的颜色更改为透明

 .banner 
        padding: 2px 0;
    background-color: transparent;

它可以工作，但并不完全，因为该条会退回到白色背景的颜色，因此它还不是 100% 透明。

我正在考虑分离栏并将其放置在其下方的背景图像上，它将在背景图像上透明。 但不知道如何做到这一点，有人可以帮忙。

我只需要让顶部的栏透明

相关网站供参考

Ref site

【问题讨论】：

表示banner应该在导航右边？

意味着背景应该在导航的后面，我想我们说的是同一件事。我的意图是让导航栏在其上透明

【参考方案1】：

opacity 属性指定了不透明度/透明度 元素。 opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明

例如：你可以试试这个

.banner 
        padding: 2px 0;
        opacity: 0.6;

【讨论】：

它没有按计划工作，如果你通过检查网站上的元素来尝试它，我给了你看到我说谢谢

【参考方案2】：

我想你正在寻找这个

.banner 
    padding: 2px 0;
    background: transparent;
    position: absolute;
    left: 0;
    right: 0;

【讨论】：

哇，谢谢伙计，但是我怎么让它厚一点，我只是问问谢谢

我的意思是有点可见但透明

添加rgb背景，即背景：rgba(255, 255, 255, 0.6);

【参考方案3】：

我已经在给定的 URL 上应用了这个 CSS，它可以工作。 所以你必须在横幅类上应用 CSS。

    .banner 
    padding: 2px 0;
    position: absolute;

那么您的导航栏将是黑色的。 您可以为导航菜单的锚标记赋予白色以显示为白色。 在这个给定的 URL 中，您必须将 CSS 应用于此类

body .container .navigation ul li a
color: white;