Question

我已将此代码用于导航栏：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Something Here</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>

                </ul>
            </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">Link</a>
            </li>
        </ul>
    </div>

</nav>

以上代码适用于简单的navbar示例。由于我是stackoverflow的新手并且声誉较低，所以我无法在我的问题中添加图像。

简单的悬停我可以使用CSS，但我想悬停在其中，如果光标移动到导航栏上的任何项目，有一种效果，如颜色水填充玻璃。

此外，我非常好奇如何以某种角度使该部分或div略微倾斜。

请参阅以下链接以供参考：
This the template for reference
我正在尝试制作一个导航栏，并且像这个模板一样精确地结束一段。

Answer 1

您引用的模板会创建底部＆＃34;倾斜＆＃34;使用以下CSS：

.section {
  position: relative;
}

.section:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -195px; /* the height of your image */
  left: 0;
  z-index: -1;
  height: 195px; /* the height of your image */
  background: url(path/to/your/image.png) no-repeat 50% 0%;
}

如何在导航栏中添加颜色填充效果？另外如何让这个部分或div的结尾有点斜蚂蚁一个小天使？

1 个答案: