Question

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

所以我创建了一个标题，并将标题和标题放在标题中。但是，每当您滚动内容时，该区域都是半透明的。

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

注意：

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

Answer 1

将#header和样式的位置固定为显示：块或类似。位置：固定将使内容滚动到页面，这就是图像显示在此标题部分下面的原因。

Answer 2

我找到了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)"
}

Answer 3

.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>

这对我有用！

HTML / CSS：半透明标题 - 没有内容/叠加

3 个答案: