【问题标题】:fixed navigation with image repeat-x使用图像重复-x 修复导航
【发布时间】:2014-04-26 18:19:31
【问题描述】:

我正在努力修复我的导航栏,同时让重复为“repeat-x”。下面是进一步使用 css 时的结果图像。

这是包含在顶部链接(导航栏)中的 css 代码。

.toplinks {
    /*float: right;*/
    {vb:stylevar right}:{vb:math {vb:stylevar padding}*2};
    color:{vb:stylevar toplinks_link_color};
    font: {vb:stylevar header_font};
    text-align:{vb:stylevar right};
    background:{vb:stylevar toplinks_background};
    padding-top: 10px;
    height: 35px;
    background-attachment: scroll;
    background-image: url({vb:stylevar imgdir_misc}/top-links-bg.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #633f24;
    z-index: 20;
    position: fixed;
}

导航栏不是我做的,而是我添加了“位置”和“z-index”。我希望该栏使用 repeat-x 穿过页面。

这有可能吗,如果可以,你能帮帮我吗?

http://a-trix.net/

【问题讨论】:

  • 你能发布你的html吗??
  • 一个 jsfiddle 或网站链接会很有用。
  • 添加了网站链接。

标签: html css background-image css-position repeat


【解决方案1】:

尝试将包含元素设置为 position: relative;然后设置左:0;

它看起来不一定像一个重复 x 问题,更多的是你的元素被推过。

编辑:

.toplinks {
color: #eee2d6;
font: normal normal normal 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
text-align: right;
background: none;
padding-top: 10px;
height: 35px;
background-attachment: scroll;
background-image: url(http://a-trix.net/forum/images/primus/sandy/misc/top-links-bg.jpg);
background-position: left top;
background-repeat: repeat-x;
background-color: #633f24;
position: fixed;
width: 100%;
z-index: 1000;
}

【讨论】:

  • 如果我这样做,它不会在我滚动时粘在屏幕顶部。我基本上是在想办法让它在滚动时保持在屏幕顶部,但仍然可以让背景图像重复-x。
  • 你误会了。保持位置:固定;元素,但将 container 设置为 position: relative; - 那是固定的元素所在的元素。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-16
  • 2012-03-15
  • 1970-01-01
  • 1970-01-01
  • 2016-09-17
  • 1970-01-01
相关资源
最近更新 更多