css - 可以使类为 "btn btn-default"(Bootstrap 3.3.7) 的标签中的文本与背景匹配吗?

标签 css twitter-bootstrap razor

<分区>

是否可以使类为“btn btn-default”的标签中的文本与背景图像相匹配?我在 Razor 中使用 Bootstrap 3.3.7。

这里是有问题的代码:

<a class="btn btn-default" href="@Url.Action("Login", "Account")">Log in</a>

我想让按钮的文字与背景相匹配。当前的按钮显示在以下链接提供的图像中:

Log in button

如您所见,按钮中的文本只是灰色,但我希望文本与背景完全匹配。是否可以使此按钮中的文本与 Razor View (Bootstrap 3.3.7) 中的背景相匹配?

这是一个 example我想要但在 Android 中实现的东西。

谢谢!

编辑: 我看过这个 solution , 已经。这样做的问题是,当我上下滚动页面时,文本与其背后的背景不匹配,就好像文本一直停留在页面顶部的相同位置。文本实际上是嵌套的,如下代码所示:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="btn btn-default" href="@Url.Action("Login", "Account")">

我想要的简化版本:

Link that shows exactly what I want

很抱歉一开始没说清楚,但是你看到右上角的“注册”和“登录”按钮了吗?我希望“注册”和“登录”是透明,这样当你上下滚动时,你可以通过“注册”和“登录”看到背景

最佳答案

这是可能的。你不需要 Bootstrap 。

button {
  padding: 10px 50px;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  border: 2px solid #fff;
  border-radius: 3px;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  cursor: pointer;
}
button:hover {
  background-color: #fff;
  color: #222;
}

试试 codepen引用链接

关于css - 可以使类为 "btn btn-default"(Bootstrap 3.3.7) 的标签中的文本与背景匹配吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45687441/

上一篇:javascript - 为什么无限滚动中的 wrapAll 有很多 div?

下一篇:html - 如何让 a 标签垂直居中到 footer 标签?

相关文章:

CSS 下拉菜单 : z-index issue

html - 垂直更多虚线选项

jquery - 如何在网站全屏时将选择语句显示为列表?

javascript - 加载文本字段时自动调用 JS 函数

html - CSS:在绝对div中嵌套绝对div?

css - Bootstrap 3 多个导航栏

html - display flex 和 display block 的 CSS 问题

twitter-bootstrap - MVC 4 Google 字体 - 内联网

html - 在 Visual Studio 2019 中使用的 Razor View 未更新

c# - 没有秒和毫秒的 TimeOfDay