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:半透明顶栏可能吗? 的相关文章

  • 将 webpack(环境)变量传递给 scss 文件

    对 webpack 非常陌生 我希望能够读取一个值 在本例中具体是env from webpack config js in a sass文件 这样我就可以根据环境有不同的CSS 例如 env 开发 颜色 绿色 env 生产 颜色 蓝色 到
  • Node-sass 是 React 项目的开发依赖还是生产依赖?

    在各种 React 文档中 我看到它被添加为产品依赖项 但我不明白为什么 难道它不应该是一个 devDependecy 吗 因为 SASS 只在开发过程中被编译 而当推送到 prod 时 你实际上推送的是编译后的 CSS 文件 由于需要进行
  • 使用node-sass编译SCSS时出现未定义变量错误

    包 json scripts compile sass node sass sass main scss css style css w 主文件 import abstracts variables import base typograp
  • 如何解决这个 sass 插值问题

    警告 您可能不想在此处进行插值时使用颜色值白色 它最终可能会呈现为白色 这可能会产生无效的 CSS 将颜色名称用作字符串或映射键时 请始终引用颜色名称 例如 白色 如果您确实想在此处使用颜色值 请使用 colorName 93 text c
  • SASS/SCSS 变量不适用于 CSS 变量赋值

    我有以下 SCSS 代码 mixin foo bar 42 xyzzy bar bar include foo 我希望得到 CSS 变量 xyzzy set to 42 on all bar元素 相反 我得到 CSS 说明bar xyzzy
  • 预加载背景图像

    我正在构建一个循环显示 3 个不同背景的页面 每 750 毫秒更改一次 为此 我在主体中添加了一个带有相关背景图像的类 并使用 JS 进行了更改 对于第一次循环 它们会闪烁 因为图像必须加载 所以它不会立即出现 因此 我可以使用任何方法来预
  • 用于匹配编号大于的类的 CSS 选择器

    我有一个使用 Sencha Touch 2 开发的移动混合应用程序 需要根据其运行的 iOS 版本进行一些自定义 我的 Sass 样式表中曾经有以下选择器 x ios 7 put here iOS7 customizations 现在 iO
  • 编译SCSS(Compass)+刷新浏览器的最快方法?

    只是想知道您认为编译 SCSS 和刷新浏览器的最快方法是什么 我目前正在使用LiveReload 但有时似乎有点慢 可能需要1 3秒 看起来不多 但我觉得我正在失去适当的编码节奏 你们都用什么 CodeKit 会更快吗 或者也许是 Subl
  • 在 Sass mixin 中跳过可选参数

    我有这个 mixin 来处理简单的 CSS3 线性渐变 mixin linear gradient from to dir bottom dir webkit top ie filters false background color to
  • 如何在 mat-h​​orizo​​ntal-stepper 中为不同形式设置不同宽度

    我想在mat step中为不同的表单设置不同的宽度 第一个表单中的内容为400px宽度 第二个表单内容为700px宽度
  • Zurb Foundation 5,modernizr 未找到

    我在生产模式下使用 Foundation 5 0 2 0 时遇到此问题 在 Rails Unicorn NginX 和 Ubuntu 上 NetworkError 404 Not Found http mydomain com javasc
  • 如何根据 Angular 中的全局 CSS 类名调整组件的 CSS?

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

    我正在尝试设置 Assetic PHP 资源编译器 并且它可以与 CoffeeScript Stylus 和 Less 一起使用 所有 NPM 包都运行良好 然而 对于 Sass 我遇到了问题 以下是我到目前为止所采取的步骤 我安装了 RV
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • ZURB Foundation,以编程方式切换选项卡

    我使用 asp 与基础 有没有办法使用 JS 或 ASP 在一个选项卡之间切换到另一个选项卡 Link http foundation zurb com docs tabs php 简单选项卡 一个可能的解决方案是为选项卡链接分配一个 id
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同
  • Angular 2 从 styles.scss 扩展样式

    在 Angular 2 中 我的 CSS 类styles scss file FirstClass 我试图在组件的 SCSS 文件中扩展此类 例如 MyComponent scss like SecondClass extend First
  • Bootstrap 3 RC 1 准备好投入生产了吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我今天要开始一个巨大的项目 我选择 Zurb 基金会是因为他们 非常 良好的移动优先策略 当我几个月前开始四处寻找时 Bootstrap 3 还
  • 使用 SASS(从命令行)和 Autoprefixer(对于 Bootstrap 4.x)

    我最近开始使用scss文件 尤其是自定义文件引导程序 为了编译我的 scss 文件 以及引导程序 我使用sass https sass lang com 从命令行 例子 sass path to scss bootstrap mycusto
  • 创建由线连接的 CSS3 圆圈

    我必须在 CSS 中实现以下圆形和线条组合 并且我正在寻找有关如何有效实现此功能的指示 圆圈和线条应如下所示 我能够这样实现圆圈 span step background ccc border radius 0 8em moz border

随机推荐

  • $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