1

在我当前的网络项目中，滚动应该在徽标和标题之后开始。
这是页面： http: //neos-srv.dyndns.org/restaurantAppHtdocs/site.php

所以我创建了一个标题并将徽标和标题放在标题中。但是由于无论何时滚动该区域都是半透明的，因此内容会通过标题闪耀。

那么如何制作一个不与内容重叠的半透明标题呢？

笔记：

  • 仅当浏览器窗口/分辨率太小时页面才会滚动（在浏览器窗口上撤消最大化以进行测试）
  • Header 需要半透明才能显示背景图片。我已经尝试为标题使用背景图像，它是背景的一部分 - 但这只在同一台显示器上看起来不错。示例：http ://neos-srv.dyndns.org/restaurantAppHtdocs/site.php?page=restaurants
  • 请不要使用 Internet Explorer - 因为它不能正确呈现网站
4

3 回答 3

0

将位置固定在#header 和样式为 display:block 或类似。Position:fixed 将使内容随页面滚动，这就是图像出现在此标题部分下方的原因。

于 2012-08-06T07:42:54.130 回答
0

我找到了 FF 和 Chrome 的修复程序。IE 和 Safari 显示的页面非常糟糕：

HTML：

<div id="header">'
<div id="headerPic" style="background: url(Bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bg.jpg', sizingMethod=scale);
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bg.jpg', sizingMethod=scale);">
<div id="headerContent">
...
</div></div></div>

CSS：

#header {
    position:fixed;
    display: block;
    top:0px; left:0px; right:0px;
width: 100%px;
    z-index:5;
    overflow: hidden;
    height: 215px;
}

#headerPic {
    width: 100%; height: 100%;          
    background: url(images/restaurantsBg.jpg) no-repeat center center fixed;
    background-size: 100%;
}

#headerContent {
    width: 701px;
    margin: 0 auto;
    height: 215px;
    background: rgba(255,255,255, 0.80);
    /* Colors: transparency, r, g, b
    /* For IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#d0ffffff, endColorstr=#d0ffffff);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#d0ffffff, endColorstr=#d0ffffff)"
}
于 2012-08-21T08:47:59.227 回答
0 

.home{
  height: 100vh;
  overflow-y: auto;
  background-image: url('https://i.imgur.com/nfHr3AD.jpg');
  background-size: cover;
  background-position-x: center;
}

.content{
  height: 92vh;
  margin-top: 17vh;
  overflow-y: auto;
}

.header {
  height: 15vh;
  background-color: rgba(71, 83, 143, 0.41);
  position: fixed;
  width: 100%;
  top: 0;
  border-bottom: 1px solid black;
}
<div class="home">
  <div class="header">
    my header content
  </div>
  <div class="content">
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
    <h5>first list</h5>
  </div>
</div>

这对我有用！

于 2019-07-19T14:33:28.053 回答