Html 如何在滚动时让内容消失/隐藏在透明标题后面_Html_Css

Html 如何在滚动时让内容消失/隐藏在透明标题后面

html css

Html 如何在滚动时让内容消失/隐藏在透明标题后面,html,css,Html,Css,我创建了一个js fiddle，它有一个透明的固定头当我滚动时，你可以看到文本在它后面向上滚动。如何使文本消失或隐藏在滚动条上的透明div后面编辑：忘记提到背景是图像注：我是一名编码初学者。这是我在玩弄代码，试图找出问题所在这是我的html： <div class="container"> <header> <ul> <li>list one</li> <li>list3

我创建了一个js fiddle，它有一个透明的固定头

当我滚动时，你可以看到文本在它后面向上滚动。如何使文本消失或隐藏在滚动条上的透明div后面

编辑：忘记提到背景是图像

注：我是一名编码初学者。这是我在玩弄代码，试图找出问题所在

这是我的html：

<div class="container">

<header>
    <ul>
        <li>list one</li>
        <li>list3   </li>
        <li>list2</li>
    </ul>
</header>

<div class="text">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.

    </p>
</div>

如果可以设置收割台高度，可以使用

位置：绝对

和

溢出：自动

获得结果

我找到了另一个解决方案，仅限于CSS：

用你的背景制作一个容器div
将标题透明和
```
高度
```
设置为
```
10vh
```
将车身
```
高度
```
设置为
```
90vh
```
并将
```
溢出
```
设置为
```
自动
```

抱歉，这是React/MaterialUI，但您将了解要点：

const classes = theme => ({
  container: {
    fontFamily: 'Roboto,"Helvetica Neue",Arial,sans-serif',
    margin: 0,
    padding: 0,
    minHeight: '100%',
    backgroundImage: 'url(/cargo-background.jpg)',
    backgroundSize: 'cover',
    backgroundAttachment: 'fixed',
  }
})

<div className={classes.container}>
    <div style={{height: '12vh'}}>
      <AppBar/>
    </div>
    <div style={{height: '88vh', overflow: 'auto'}}>
      <Routes/>
    </div>
</div>

const classes=theme=>({
容器：{
fontFamily:“Roboto”，Helvetica Neue，Arial，无衬线，
保证金：0，
填充：0，
minHeight：“100%”，
背景图片：“url（/cargo background.jpg）”，
背景尺寸：'封面'，
背景附件：'固定'，
}
})
假设你的标题像一个粘性菜单，它会显示下面的背景图像-我认为如果没有标题/菜单后面的文本，这将更容易实现。相反，在IMO中，您最好使用固定布局，以下是一个示例：
有一个全屏容器来启动固定布局，在标题和内容部分中。您可以在此处使用flexbox使内容部分填充空间，但不会溢出，而页眉高度基于页眉内容（因此，不必像人们所说的那样设置页眉高度）

.container{
位置：固定；
顶部：0；右侧：0；底部：0；左侧：0；
背景：幽灵白；
显示器：flex；
弯曲方向：立柱；
flex:1自动；
}
标题菜单{
边框：1px实心#000；
}
第1.text节{
边框：1px实心#fff；
溢出y：滚动
}


清单一
清单3
清单2


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种古老的植物，它是一种美丽的植物。莫氏Phasellus mollis mollis sem quis porttitor。佩伦特式的权杖毛里斯和马格纳·廷西德，法雷特拉·埃尼姆·法雷特拉。
杜氏狸鼠是一种浦氏狸鼠。这是一种发酵酒。这是一个很好的例子。在interdum，lorem et luctus laoreet，felis purus pharetra turpis，eu Egesta justo ligula在lectus。莫比·维塔·维勒·维利·波苏尔·卢克图斯
欧盟直径。这是一个很好的选择。智者三世万岁。Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种古老的植物，它是一种美丽的植物。莫氏Phasellus mollis mollis
塞姆奎斯波特托。佩伦特式的权杖毛里斯和马格纳·廷西德，法雷特拉·埃尼姆·法雷特拉。杜氏狸鼠是一种浦氏狸鼠。这是一种发酵酒。这是一个很好的例子。普罗因·因特杜姆、洛雷姆·勒克图斯·拉奥里特、猫科动物普罗斯
法雷特拉·图皮斯（pharetra turpis），列克图斯（lectus）的欧盟埃古斯塔（Egesta justo ligula）。在欧盟diam的Morbi vitae libero vel velit posuere luctus。这是一个很好的选择。智者三世万岁。

如果您希望隐藏滚动到下方的内容，那么使用透明标题有什么意义？将标题设置为白色将使其看起来相同，但后面的内容将被隐藏：对不起。我有一张背景图片的图片，但我不确定如何在js fiddleAh中获得它，这是可能的，但是你必须设置标题的高度（不能是动态的）这里有一个背景图片的示例，或者你有一张图片，或者只是一种颜色，我的示例应该按照你的意愿工作，你测试了吗？“半个屏幕”？它填满了整个可滚动区域。“如何让文本消失或隐藏在滚动上的透明div后面”的哪一部分是我的示例没有做到的？这就是我要寻找的，但不确定它是如何工作的。那么文本是从顶部溢出的？设置收割台高度有什么错？设置收割台高度没有错，但有些人可能不想这样做（动态基于收割台中的多少）。为什么使用绝对位置？我不能使用相对位置来实现这种效果吗？
const classes = theme => ({
  container: {
    fontFamily: 'Roboto,"Helvetica Neue",Arial,sans-serif',
    margin: 0,
    padding: 0,
    minHeight: '100%',
    backgroundImage: 'url(/cargo-background.jpg)',
    backgroundSize: 'cover',
    backgroundAttachment: 'fixed',
  }
})

<div className={classes.container}>
    <div style={{height: '12vh'}}>
      <AppBar/>
    </div>
    <div style={{height: '88vh', overflow: 'auto'}}>
      <Routes/>
    </div>
</div>