Zurb Foundation:半透明顶栏可能吗?

2024-05-06

有没有办法用 Zurb Foundation 制作一个半透明的顶栏?

据我所知,我已经在我的_settings.scss file:

$topbar-bg-color
$topbar-bg
$topbar-dropdown-bg
$topbar-dropdown-link-bg
$topbar-dropdown-label-bg

并尝试了所有数量的变化(rgba的alpha值从0-0.5),并且总是以完全透明的条或半透明的条结束,下拉菜单/按钮将其背景堆叠在顶部,因此显得更暗/更不透明。

有没有办法让顶部栏始终半透明?

我可以在样式表中看到.top-bar-section li a:not(.button)总是得到背景颜色。我知道我可以在自己的样式表中手动覆盖它,但我觉得必须有一种方法来设置变量,以便这些按钮不会显得更暗?


屏幕截图右侧链接的背景由$topbar-dropdown-bg多变的。你需要将其更改为none or transparent.

其他步骤是:

  1. 将背景颜色变量设置为none.
  2. Set the $topbar-bg-color为半透明值,例如rgba(#333,0.5).

这是一个demo http://jsfiddle.net/brettdewoody/VnH6e/。我试图评论我设置背景的所有变量none.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Zurb Foundation:半透明顶栏可能吗? 的相关文章

  • 如何根据 Angular 中的全局 CSS 类名调整组件的 CSS?

    我们正在使用一个类html 判断用户是否在的元素dark or light应用程序的模式 这个类是使用添加的Renderer2在检测用户所选设置的服务中 到目前为止效果很好 现在 我们必须调整所有组件 以便在黑暗模式下也能看起来很好 但问题
  • Sass:使用多个嵌套选择器选择父元素

    这就是我最终想要做的 books dvds magazines article books Wanting the selector to only be books article article Can apply to any of
  • 安装 Sass 时出错(Ruby 2.5.0.1、MSYS2 20161025.0.0)

    我尝试安装 Sass 我安装了Ruby and MSYS2在此之前 来自所有人的最新消息巧克力味 https chocolatey org choco install ruby choco install msys2 看来它们已正确安装 r
  • 你能测试一下 mixin 是否存在吗?

    Sass 快速提问 希望如此 你能测试 mixin 是否存在吗 例如 if thumbnail mixin else define mixin 理想情况下我会使用 unless 但这只存在于叉子上 我知道你可以覆盖 mixin 但我想更多的
  • NuxtJS & SASS Loader - 在生产环境中使用 sass-loader (SCSS) 进行构建

    我添加了此行以在开发 本地 服务器上使用 sass loader 进行构建 nuxt config js module exports mode spa build analyze analyzerMode static generateS
  • 无法在 Angular 4 中使用自定义主题

    我正在尝试在我的角度项目中使用我的自定义主题 它没有按预期工作 我收到以下错误 node modules css loader sourceMap false importLoaders 1 node modules postcss loa
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • SaSS 循环使用

    我想创建类 将特定边距应用于我的块 例如 standard margin top margin top 10px standard margin bottom margin bottom 10px small margin top larg
  • Angular 2 从 styles.scss 扩展样式

    在 Angular 2 中 我的 CSS 类styles scss file FirstClass 我试图在组件的 SCSS 文件中扩展此类 例如 MyComponent scss like SecondClass extend First
  • 在 Vue SFC 组件中导入 SCSS 文件,无需使用 Webpack 进行重复

    当我尝试访问所有 Vue SFC 中的 scss 文件时 样式会重复 导致大型 css 包和开发工具在样式调试时崩溃 我正在使用 Webpack 4 和 webpack dev server 来构建和运行具有热重载的开发服务 我没有使用 V
  • Sass 与 BEM,继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 基础 5 显示模态不起作用

    祝大家有美好的一天 我在我的迷你项目中使用 Foundation 5 我想使用框架的显示 模式功能 但似乎不起作用 索引 html
  • Opera Mobile 不允许 jQuery 点击

    我一直在测试基础 CSS 框架 并且非常喜欢该框架提供的自定义表单元素 我建了一个页面 http eventgrapple com home 测试框架 它运行良好谷歌浏览器 http en wikipedia org wiki Google
  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots
  • 当使用 @use 导入文件时: Error Undefined Mixin

    我有一个入口文件 use mixins use default 现在当我使用 mixin 时default scss它抛出错误 Dart Sass 失败并出现以下错误 错误 未定义的 mixin Since use受到鼓励我不明白为什么这不
  • 将全局样式表与故事书和角度结合使用 - SassError:SassError:预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre
  • Rails 资产管道:CSS 无效

    我正在尝试使用http designshack net articles css build an animated photo wall with css http designshack net articles css build a
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 基于现有类的 Sass 'if' 语句

    我是 Sass 新手 想使用 if 语句来检测元素上的现有类 以便生成相关的 css 我的设置有大量 Javascript 生成的图像 这些图像被分配了唯一的 ID 以及 图片 类和随机分配的上 右 下或左类 我还使用 Sass 的随机函数

随机推荐

  • $lookup mongodb 中的 $project

    我有一个查询 使用 lookup https docs mongodb com manual reference operator aggregation lookup 加入 两个模型 之后我使用 project https docs mo
  • 带 cookie 身份验证的 Gorilla websocket

    这是我的设置 我正在构建一个带有用户登录的服务 使用 Negroni 和 Gorilla 登录后 用户会获得一个会话 cookie 服务器使用该会话 cookie 来授权受保护的端点 受保护的端点之一允许用户 客户端与服务器打开 Webso
  • 从 Datastax 6.0 到 Cassandra 3 的迁移路径

    我正在尝试找到从 Datastax Enterprise DSE 6 0 14 到 Cassandra Community OSS 3 的迁移路径 到目前为止 我无法找到有效的迁移路径 所有键空间复制均已更新为NetworkTopology
  • 比较 TCP 校验和与 Scapy?

    我试图在使用 Scapy 作为嗅探器时识别校验和不正确的数据包 我可以通过访问获得原始校验和 packet TCP chksum 然后我使用删除它 del packet TCP chksum 我想做类似的事情 if originalChec
  • OpenSSL的EVP是什么意思?

    OpenSSL的EVP是什么意思 我知道它是 OpenSSL 中的一个更高级别的加密接口库 但是字母 E V P 代表什么 谢谢 陈兹 有趣的问题 我不确定 但是 ifndefevp h 顶部是 ifndef HEADER ENVELOPE
  • PHP/HTML 添加删除按钮

    我有下面的代码来从数据库中检索行 其中用户名列与基本目录名称匹配 username basename dirname FILE username mysql real escape string username result mysql
  • Android 添加新日历

    我已经检查了所有从 Android 应用程序中创建新日历的方法 我见过的唯一方法是在最新的 api 版本中使用新的 Calendar API 但这似乎只有在您使用时才有效CalendarContract ACCOUNT TYPE LOCAL
  • Java中如何做系统捷径跨平台集成?

    您可能知道 Mac OS X 中保存的快捷键是Cmd S在 Windows 上是Ctrl S 关闭应用程序的捷径是Cmd QWindows 是Alt F4 但问题是如何在 java 应用程序中执行这些操作 我是否需要找到我在应用程序中使用的
  • 将 Swift 类添加到具有多个目标的 Objective-C 项目

    我有一个现有的 Obj C 项目 其中包含许多共享相同 AppDelegate 的目标 我想桥接一个由选定目标使用的快速类 当我有一个目标时 我可以轻松地做到这一点 当我向项目添加 swift 文件时 我选择所需的目标并生成必要的 brid
  • 警告:mysqli_real_escape_string() 需要 2 个参数,其中 1 个给定...我做错了什么? [复制]

    这个问题在这里已经有答案了 我尝试使用 php 登录 但收到此错误 Warning mysqli real escape string expects exactly 2 parameters 1 given 我做错了什么 注册 php
  • 如何生成接口的swagger文档?

    我已经用谷歌搜索过它 但是 swagger 文档的所有示例都使用类 我想包括接口 因为读者对 API 而不是实现感兴趣 这是我的代码 包含所需的 Maven 依赖项
  • 如何在 Laravel 中存储非 php 文件的模板?

    我们可以存储PHP模板文件使用bladeLaravel 中的模板引擎 但是 我想在远程服务器上创建一个配置文件 每个文件包含 20 30 行以上 到目前为止 我一直在使用Perl 我曾经执行 Perl 文件 该文件用于将内容转储到一个文件中
  • 使用 UICollectionViewFlowLayout 重新排列 UICollectionView 的不同大小的项目

    假设我有一个带有 UICollectionViewFlowLayout 的 UICollectionView 并且我的项目大小不同 所以我已经实施了collectionView layout sizeForItemAt 现在假设我允许用户重
  • 了解 Beautiful Soup 中的 Find() 函数

    我知道我想做的事情很简单 但这让我感到悲伤 我想使用 BeautifulSoup 从 HTML 中提取数据 为此 我需要正确使用 find 功能 这是我正在使用的 HTML div class audit div class profile
  • 根据另一个数据框中的数据量删除一个数据框中的行

    我有两个 pandas 数据框A and B B是 A 的子集 我想删除 A 中的所有数字 如果 B 中存在该数字 But 如果一个数字在 A 中出现两次 在 B 中出现 1 次 那么它只会从 A 中删除该数字的 1 次出现 这是我的示例数
  • 在 Visual Studio Code 中找不到“调试:评估”的 CommandID

    我想在 Visual Studio Code 中添加命令 调试 评估 的键盘快捷键 不幸的是 命令 调试 评估 的命令 ID 没有记录 有人知道在哪里可以找到 commandId 吗 editor debug action selectio
  • 对周围的所有 Node JS 框架/库等感到困惑 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我感觉有点困惑 有很多 Node js 相关 东西 的框架 有人能给我一个概述吗 以下库 框架 其他内容如何相互关联 交互 其中包括什么或
  • Sikuli 积分器 C#

    我想在 C 中使用 Sikuli Integrator 我以管理员身份运行 VS 通过 NuGet 管理器安装 Sikuli Integrator 并想在简单任务上测试他 这是我的代码 using SikuliModule using Sy
  • 创建因子时设置级别与 `levels()<-`

    让我们首先创建一些因素 F1 lt factor c 1 2 20 10 25 3 F2 lt factor paste0 F1 years F3 lt F2 levels F3 lt paste0 sort F1 years F4 lt
  • Zurb Foundation:半透明顶栏可能吗?

    有没有办法用 Zurb Foundation 制作一个半透明的顶栏 据我所知 我已经在我的 settings scss file topbar bg color topbar bg topbar dropdown bg topbar dro