【问题标题】:Cover Effect CSS封面效果 CSS
【发布时间】:2013-07-05 14:52:47
【问题描述】:

在这个网站http://rushir.co/ 我想让标题(slide.js)固定,就像背景一样,这样当你滚动“我是谁”时就会出现覆盖它。我该怎么办?

另外,我设法修复了 Twitter 和电子邮件链接,但是当它滚动时我似乎无法让“我是谁”覆盖它。 我该怎么办?

如果查看源代码还不够,代码在 GitHub 上https://github.com/rushir/rushir.github.io

提前感谢您的帮助!

【问题讨论】:

  • 我试过了,它使标题固定,但在顶部而不是之前的页面中间,Twitter 和电子邮件的链接也消失了。 (你可以在这里看到rushir.co

标签: html css effect


【解决方案1】:

要解决您的问题,您必须从导航元素中删除“style = margin-top: -250px”:

<nav style="margin-top: -250">

to

<nav>

然后将您的 css 文件放入导航关闭:位置:固定或任何您想要的。示例:

 nav {                                                                                    
      position:fixed;
      margin-top:0;// Or what ever value you want                                                                                                                                                                              
      width: 100%;                                                                                         
      text-align: center;                                                                                  
      left:0;                                                                                              
      top:0;                                                                                               
 } 

left: 0 和 top: 0 是为了让元素在firefox中固定定位时不会消失。

这是我们在 html 标签中放入内联 css 代码时遇到的问题。在 html 标记中声明的属性以后不能在 .css 文件中被覆盖,除非我们直接修改 .html 文件或使用 !important hack(不推荐)覆盖它。

e)。

额外:要将链接放在页面的顶部中心,请将块替换为相同的选择器,然后您就完成了:

nav {
    position:fixed;
    width:100%;
    left:0;
    top:0 
}

nav ul {
    display: block;
    line-height: -20;
    vertical-align: center;
    width:inherit; 
    text-align:center;
}
nav ul li {
        list-style: none;
        margin: 30px 30px 50px; 
        margin: 1.875rem 1.875rem 3.125rem;
        font-family: "Lato", Arial, sans-serif;
        font-size: .8125em;
        font-weight: 400;
        text-transform: uppercase;
        display:inline-block; 
}

我希望它有所帮助:)。干杯。

【讨论】:

  • 好吧,我照你说的做了,但现在当你滚动标题时,链接没有被“覆盖”,而是位于“我是谁”部分的顶部。 rushir.co 还有,如何使导航链接(Twitter 和电子邮件)居中而不是左对齐?
  • 抱歉,我无法理解您要完成什么,您能否给我一个更明确的解释,也请用当前问题更新您的 Guthub 存储库,以便我可以查看更多详细信息你想要什么,这会很有帮助:)。
  • 当您向下滚动时,我希望“我是谁”部分位于标题顶部。现在,由于某种原因,当您向下滚动时,标题 (slide.js) 停留在“我是谁”部分的顶部,这与我想要的相反。我已经更新了 GitHub 存储库。
  • 只需将属性“z-index: 0”放在你的 .title 类中,然后在你的 .who 类中放置“position: relative”和“z-index: 1”,这将表明标题的 z 轴位置低于 who 部分使标题始终隐藏从 .who 部分开始,注意您可以在“z-index”属性中输入任何值并获得与 .title 相同的结果元素的值低于 .who 部分。
  • 太棒了,它成功了!现在最后一件事 - 我如何让链接(“Twitter”和“Email”)位于页面的中心,就在标题下方?感谢您的帮助!
猜你喜欢
  • 2019-04-28
  • 2011-03-07
  • 1970-01-01
  • 2015-11-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-26
相关资源
最近更新 更多