滚动视频上的导航栏不透明度
是指当网页中存在视频背景时，导航栏在滚动页面时保持不透明的效果。这样做的目的是为了确保导航栏在视频播放过程中始终可见，提供更好的用户体验。
滚动视频上的导航栏不透明度的实现可以通过以下步骤：
- 监听页面滚动事件：使用JavaScript代码监听页面滚动事件，以便在滚动时触发相应的操作。
- 获取滚动位置：通过JavaScript代码获取当前页面的滚动位置，可以使用
window.scrollY或window.pageYOffset属性来获取。 - 计算导航栏透明度：根据滚动位置计算导航栏的透明度。可以根据滚动位置与视频的高度进行比较，设定一个阈值，当滚动位置超过阈值时，导航栏的透明度设为0，即完全不透明；当滚动位置小于阈值时，根据滚动位置与阈值的比例来设定导航栏的透明度，实现逐渐变为不透明的效果。
- 设置导航栏样式：根据计算得到的透明度值，使用CSS样式来设置导航栏的透明度。可以使用
rgba()函数来设置导航栏的背景颜色，其中最后一个参数表示透明度，取值范围为0到1，0表示完全透明，1表示完全不透明。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0); /* 初始透明度为0 */
transition: background-color 0.5s ease; /* 添加过渡效果 */
}
</style>
</head>
<body>
<div class="navbar">
<!-- 导航栏内容 -->
</div>
<div class="video">
<!-- 视频内容 -->
</div>
<script>
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.navbar');
var videoHeight = document.querySelector('.video').offsetHeight;
var scrollPosition = window.scrollY || window.pageYOffset;
if (scrollPosition > videoHeight) {
navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)'; /* 滚动位置超过阈值，完全不透明 */
} else {
var opacity = scrollPosition / videoHeight; /* 根据滚动位置与视频高度的比例计算透明度 */
navbar.style.backgroundColor = 'rgba(255, 255, 255, ' + opacity + ')';
}
});
</script>
</body>
</html>以上代码中，通过监听滚动事件，根据滚动位置与视频高度的比例计算导航栏的透明度，并使用CSS样式设置导航栏的背景颜色。当滚动位置超过视频高度时，导航栏完全不透明；当滚动位置小于视频高度时，透明度逐渐增加，实现滚动视频上的导航栏不透明度效果。
对于腾讯云的相关产品和产品介绍链接地址，可以参考以下推荐：
- 视频处理：腾讯云点播（https://cloud.tencent.com/product/vod）
- 人工智能：腾讯云智能视频分析（https://cloud.tencent.com/product/vca）
- 存储：腾讯云对象存储（https://cloud.tencent.com/product/cos）
- 云原生：腾讯云容器服务（https://cloud.tencent.com/product/tke）
- 数据库：腾讯云数据库（https://cloud.tencent.com/product/cdb）
- 网络安全：腾讯云Web应用防火墙（https://cloud.tencent.com/product/waf）
- 物联网：腾讯云物联网开发平台（https://cloud.tencent.com/product/iotexplorer）
- 移动开发：腾讯云移动应用开发平台（https://cloud.tencent.com/product/mad）
- 区块链：腾讯云区块链服务（https://cloud.tencent.com/product/tbaas）
- 元宇宙：腾讯云元宇宙解决方案（https://cloud.tencent.com/solution/metaverse）
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。
相关·内容
1回答
我有一段javascript，它可以在滚动时调整导航栏的透明度；当缓慢滚动时，一切正常，但当滚动速度很快时，它似乎没有被调用，导航栏透明度也没有设置。 有什么线索吗？我使用Bootstrap 4。 $(document).ready(function() {
// Set original transparency
$("#navbar").css("background-color", "#1c447a00");
// Bind to scroll
$(window).scroll(function(){
浏览 20提问于2020-06-08得票数 0
回答已采纳
1回答
因此，从iOS 15开始，它更新了导航栏的外观。如果它背后没有任何内容(如。我们没有向上滚动)，它将是透明的。这也会影响状态栏。
当我隐藏导航栏时，状态栏保持透明。如果我这样做(app委托)：
if #available(iOS 15.0, *) {
let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithOpaqueBackground()
navigationBarAppearance.backgrou
浏览 11提问于2022-03-02得票数 0
回答已采纳
1回答
我试着制作一个导航条，当用户滚动页面时，导航条变得半透明，然后如果用户鼠标悬停在导航栏上，它会重复，然后当用户将鼠标移出物体时再次退出。我似乎想不出如何：
让导航条只在鼠标离开后，当用户向下滚动页面时才会褪色--我不希望当用户将鼠标移离屏幕顶部时，只有当鼠标在页面上向下滚动时，才会使其褪色。如果他们移动鼠标，而不是直接移动鼠标，就会慢慢消失，然后进入设定的不透明状态。
$(window).scroll(function() {
if ($(window).scrollTop() > 75) {
$('#navBar').css("opaci
浏览 3提问于2014-05-15得票数 1
回答已采纳
3回答
我有一个导航栏，我想保持在一个固定的位置(顶部)，在我的网站上。我也希望导航栏有一些透明度。我将透明度应用于导航栏，这也使div中的任何内容(子元素)也继承了透明度。因此，为了解决这个问题，我对导航栏中的内容应用了一个相对位置，但现在应该显示为固定的内容(在导航栏中)与页面内容的其余部分一起滚动。我该如何解决这个问题呢？
浏览 0提问于2012-07-23得票数 0
回答已采纳
2回答
这个页面有一个固定的引导导航条，应该保持固定，这样背景中的视频就可以通过它发光。当滚动所有的内容向上，它将在肚脐下面，这是不利的。谁知道，如何为内容创建一个上边距，这样它就只会滚动在导航栏下面，而不会将导航条更改为“不固定”？
编辑1:主区域视频和panel_container (同时被称为主区域)都是高度100%，因为每一个，视频和瓷砖应该填充一个屏幕。
浏览 0提问于2018-01-17得票数 6
回答已采纳
我试图在导航栏具有“透明模糊”效果的情况下实现效果。我用一个问题就能达到预期的效果。导航栏是“黑色透明”的颜色。我在找它是“白色透明”的颜色。下面是当前输出的图像：
我已经在这个主题上做了大量的谷歌搜索，我只能找到使导航栏完全透明的解决方案，或者完全消除透明效果。
下面是我的导航栏故事板设置的屏幕截图：
无论我如何修改这些设置，唯一的方法，我可以获得期望的透明模糊效果是与它是“黑色透明”。有什么想法吗？谢谢!
浏览 2提问于2018-01-02得票数 1
回答已采纳
我正在尝试改变我的导航栏的不透明度从较低的滚动到较高。我的代码工作正常，唯一的问题是导航菜单项也失去了不透明度。我想他们和标志，以保持白色和不透明度1的所有时间，只想改变背景的不透明度。以下是我的代码
HTML
<nav>
<div id='cssmenu'>
<div id="logo">
<a href="#"><img src="images/logo.png" /></a>
</div>
浏览 4提问于2016-02-23得票数 0
2回答
嗨，我正在尝试实现这个导航栏效果：，这样当我向下滚动导航栏时，导航栏会跟随并动画到一个固定的位置。我已经开始在这里编写代码，但无法让动画工作：
我的Jquery目前看起来像这样：
$(function() {
var bar = $('#topbar');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
bar.stop().css({'position' : 'absolute
浏览 1提问于2013-03-11得票数 2
2回答
到目前为止，我有一个导航栏与透明的背景，当你登陆页面。在一定的滚动阈值后，它将获得类navbar- fixed，这将使导航栏固定并更改外观。
然而，我希望它有一个平滑的淡入和淡出效果，当它出现时(当你再次向上滚动时，它会消失)。
我怎样才能做到这一点呢？Jquery、fadeIn和fadeOut无法工作，因为它实际上用fadeOut完全隐藏了导航栏。
<div id="nav" class="navbar-trans">
</div>
<script type="text/javascript">
$(d
浏览 20提问于2017-01-19得票数 1
6回答
我不能解决css问题。
我有一个导航栏，应该是透明的。但由于不透明度属性以及它们是透明导航栏的子元素，它上的链接也变得透明。
你能帮我解决这个问题吗？
浏览 0提问于2013-03-02得票数 5
回答已采纳
2回答
我试图在我的导航栏中添加一个fadeIn，所以当我到达某个滚动点时，导航条就会消失。然而，我的尝试失败了。我尝试将Jquery添加到常规的javascript中，所以我不确定这是问题所在还是问题所在。我希望导航条只有在导航条再次出现的页面下方的滚动点到达时，才希望导航条fadeIn。
这可以在以下网址上看到：
我的抄本是：
window.onscroll = function() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || do
浏览 6提问于2015-12-28得票数 0
回答已采纳
1回答
不透明背景图像
、、
我一直试图在一个全屏幕大小的背景图像前面显示一个导航栏，我想调整它的不透明度。我能够正确地显示导航条和图像，直到我修改图像的不透明度。当我这样做时，背景图像不会显示为全尺寸。该图像仅在导航栏启动之前显示。
html {
background-image:url(../img/sea.jpg);
background-size: 100%;
opacity: 0.5;
}
.navigation {
background-color: grey;
list-style: none;
padding-left: 0;
浏览 5提问于2015-03-13得票数 1
回答已采纳
1回答
如何使导航栏上方的文本背景半透明，使其看起来与导航栏是同一对象？
VStack(spacing: 0) {
Text("Test")
.padding(.top, 9.5)
.padding(.bottom, 8)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray) // I used a custom color set in the screenshot
.font(.footnote)
Navigat
浏览 1提问于2019-11-12得票数 8
回答已采纳
我正在创建一个页面，其中导航栏只应在滚动几千像素后才会出现。但是，当我刷新浏览器时，导航栏会首先出现，并在我开始滚动时消失。在那之后，一切照常进行。
当页面刷新时，如何使该栏隐藏？
在这里，我使用的JS代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
浏览 1提问于2021-08-19得票数 0
回答已采纳
我的应用程序中的一个屏幕显示了一个可以放大和缩小的全屏UIImageView。然而，问题是导航栏和底部栏在屏幕上阻挡了UIImageView的顶部和底部。如何确保条形图不会阻挡内容？
浏览 0提问于2017-07-19得票数 0
2回答
仍然忙于为我的学校项目学习HTML5和CSS。但是有个问题我被难住了。
我的导航栏中的图像和链接变得透明。即使它不在同一个div中，也不是与头本身不同的类，因为头本身有一个不透明度值。
帖子是，图像和链接应该是完全可见的，并且在背景不透明的基础上。
在此，我对可能粗制滥造的类编码和命名表示歉意。
链接如下：
浏览 4提问于2014-03-19得票数 0
我目前正在尝试实现一个导航栏，它从不透明度0开始，与高度相同，以便在向下滚动页面时创建导航栏下降的良好效果。我正在使用React-spring和React-visibility-sensor 它工作得很好。但有一个小问题，当页面启动时，导航栏是存在的，并且首先淡出，然后才能正常工作。每次页面呈现时都是这样的。 我尝试了许多不同的东西，但到目前为止，在页面启动时，它的不透明度为0，这一点到目前为止还没有成功。有没有人有可能解决这个问题。我会非常感激的。 <VisibilitySensor once>
{({ isVisible }) => (
<Spring delay
浏览 6提问于2021-03-24得票数 0
回答已采纳
当我将光标拖出顶部导航栏时，搜索框将再次变得不透明:70%。我希望它保持不透明度100%，一旦我点击了搜索框，即使我拖动我的光标离开它。
input[type="text"] {
border-radius: 25px;
height: 20px;}
input[type="text"]:focus {
border-radius: 25px;
height: 20px;
outline: none;
opacity: 100%;}
input[type="text"]:active {
opacity: 100%;}
浏览 0提问于2020-06-10得票数 0
我有一个引导网页，使用视频背景。此外，我还使用了以下css代码：
.transparent{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
overflow:hidden;
}
#imgBox{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
}
在覆盖层上做“洞”，这样当用户看到图层时，他只看到下面的一部分视频。很难解释，所以看看下面的例子：
我想要达到这样的效果:一开始绿色层是透明的(假设它有rgba(0, 999, 0, 1)，但是当用户不断向下滚动，这个层变得越来越可见时
浏览 2提问于2015-07-30得票数 0
回答已采纳
我有一个问题的HTML5视频和画布的安卓(Chrome的安卓)。我从视频到画布绘制帧(使用CanvasRenderingContext2D.drawImage())。它在桌面浏览器上运行良好，但在Android版的Chrome上就不行。在Chrome for android中，它只有在视频元素可见的情况下才能工作。我的意思是它真的可见:即使元素通过属性可见，但由于页面滚动而不可见-它也不起作用。
仅当移动设备视口显示至少1像素的视频元素时，此示例才起作用。如果视频元素完全隐藏-画布没有更新。
因此，我正在寻找解决方法。视频元素不可见时如何更新画布？
浏览 2提问于2014-02-18得票数 2
2回答
我在Interface Builder中添加了一个带有透明PNG (导航栏中的徽标)的Image View，但透明像素似乎呈现为白色。
我在Interface Builder中搜索了PNG，但没有找到。有什么建议吗？
浏览 0提问于2009-11-09得票数 3
回答已采纳
如何在不影响选项卡本身文本的情况下降低导航栏中选项卡背景的不透明度？例如，文本“关于我们”的不透明度为1，但背景颜色的不透明度为0.5。这是我的CSS代码。
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
color: #FFFFFF;
background-color: #009eff;
}
浏览 2提问于2015-09-19得票数 0
5回答
基本上，我的导航栏的不透明度为0.6 (IE 8及更早版本为60)。但是，导航栏中的所有内容似乎也具有0.6的不透明度。这包括我的网站徽标，我不希望它有任何不透明，我只希望它是正常的。我怎样才能使它没有任何不透明度？
HTML：
<div id="navigation">
<img class="logo" src="/images/logoO.png">
<ul>
<li><a href="/">Home</a></li>
浏览 0提问于2013-06-15得票数 0
1回答
我有一个我刚刚部署的Firebase项目。导航栏上的链接在已部署的版本中不可见。这是is在本地的外观：
下面是它部署到我的域中的样子：
该链接是已部署的版本，单击后即可正常工作。但是为什么文本不是黑色的呢？
当屏幕宽度减小时，问题也是一样的。汉堡包都出现在上面了。在本地版本中，当单击汉堡时，带有链接的下拉列表是可见的。在已部署的版本中，下拉链接不可见。
浏览 1提问于2021-04-23得票数 0
1回答
我正在试着做一个导航栏，就像这个网站上的一样
(要查看效果，您必须单击菜单中的任何链接，以便可以向下滚动。)
正如你所看到的，当你向下滚动导航栏时，它会以视频为背景，使用一些顶部填充来固定到顶部。
我看到它使用bootstrap Scrollspy，但我真的不确定如何在我的网站上实现它。
使用CSS可以做到这一点吗？
浏览 25提问于2017-03-15得票数 0
3回答
我想知道是否有可能在导航栏上仅当:hover仅在html/css语言中处于活动状态时才显示img。
当我:hover 时，我正试图在我的导航栏下面显示这个灯
这是我的html代码:
这是我的css：
1个问题:没有JS我能做到这一点吗？(通过玩不透明游戏)。因为我试过
ul li a img{不透明度: 0;}
ul li a img:鼠标悬停{不透明度:1；}，它不工作。
2我是否可以对css中具有不同值的其他导航栏元素再次使用相同的img来更改位置，例如使用不同的类？只需改变大小和x值?如果是绝对的或相对的？
谢谢大家的光临，祝大家愉快！
浏览 0提问于2018-12-14得票数 1
因此，我有一些问题，弄清楚我认为是一个简单的动画…
基本上，如果您将topBarOpacity从interpolate替换为1，您应该会在顶部看到实际的栏...我只想让那个小的背景视图出现(根据滚动的位置淡入/淡出)。
虽然我可以在滚动时看到Animated.Event触发器，但我就是不能让不透明度按预期工作。
请指教
浏览 2提问于2018-01-24得票数 0
回答已采纳
我有一个非常简单的固定菜单栏，参见，现在菜单底部有这样的元素，如下所示：
下面是所有其他页面上的菜单：
现在在这个特定的页面上，由于某种原因，我无法获得元素(带有灰色图标的视频图标)来显示。现在，如果我检查developer工具，我会发现元素实际上是存在的：
<a href="#" id="btn-our-story" class="btn-our-story tooltip tooltipstered" data-target="#our-story-vedio"> <img src="htt
浏览 4提问于2016-04-04得票数 0
回答已采纳
我到处找过，但找不到一个适用于这个问题的答案。
我有一个粘稠的导航条，它在滚动时变得不透明，使用以下代码：
var target = $('#navbar-container');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css(&
浏览 4提问于2014-07-08得票数 0
3回答
我只希望我的肚脐按钮是可见的，而横跨整个页面的实际条形图具有完全的不透明度。每当我更改导航栏的不透明度时，它都会影响到其中的类，即使我指定这些类没有不透明度。
我贴了一张我想复制的照片。如您所见，链接将完整显示，但导航条是不可见的，允许显示完整的背景图像。它可能看起来像一个坚实的红色酒吧，但我向你保证，它是一个无形的肚脐。
任何帮助都是非常感谢的！谢谢。
下面是我的导航条HTML代码：
<div class="custom_nav">
<div class="navbar navbar-fixed-top">
浏览 0提问于2013-01-24得票数 5
回答已采纳
1回答
如何在不影响文本的情况下更改导航栏的不透明度？
下面是我是如何实现导航栏的：
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-
浏览 0提问于2013-11-20得票数 0
有没有人能帮我找到解决方法，为什么我不能把导航栏改成透明的？
我的引导导航栏是白色的，但我希望它是透明的-我希望我的导航栏是我的横幅图像的颜色，它是在它下面。但是即使我使用！重要的，它仍然是白色的吗？请帮我去掉导航栏的背景色。
我的导航栏
我的HTML
<header id="header">
<nav class="navbar navbar-expand-lg px-4">
<a href="#" class="navbar-brand">
<img src=
浏览 3提问于2020-10-08得票数 0
1回答
我想在导航栏组件的背景中做一个模糊的效果。如果我使用CSS核心上存在的普通模糊效果，它将不会像我想要的那样工作，所以我需要一些帮助。 示例： ? 在第一张图片中，底部的面板部分有一些“透明背景”，但它不是不透明的。在右边有一个带有模糊效果的导航栏。我尝试使用CSS模糊效果，但它使菜单项不可读。
浏览 168提问于2020-05-03得票数 0
我必须在导航栏的右侧有两个按钮。因此，我创建了一个工具栏，并在其内容视图中添加了两个栏按钮项。如下所示。
UIBarButtonItem *shareButton = [[UIBarButtonItem alloc]
initWithImage:[UIImage imageNamed:@"share-icon-32x32.png"]
style:UIBarButtonItemStyleBordered
浏览 2提问于2009-10-28得票数 0
回答已采纳
1回答
我正在尝试创建导航栏，当用户不在页面顶部时，导航条的不透明度会降低到80%。我已经设法使滚动和相应的CSS更改工作，但我不确定的衰落。我尝试过.fadeTo()，它似乎将不透明度降低到0，然后再次淡出导航栏，而不是从100%更改为80%。
$('document').ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('.top-navigation').css(&
浏览 4提问于2014-03-29得票数 3
回答已采纳
3回答
滚动后更改CSS
、、
我有一个导航栏，它使用一些CSS来改变不透明度：
.navbar {
background-color: #4B5253;
opacity: 0.8;
filter: alpha(opacity = 80);
}
我需要在用户向下滚动一定数量的像素后，将opacity更改为1.0，例如500px。
我正在使用jQuery，但我没有找到解决方案。
此外，我不擅长JavaScript，有时我不知道我应该把我的代码放在哪里。所以，如果有任何方法可以用CSS来完成所有的工作，那就太棒了！
当您向下滚动时，-pay会密切关注标题。
浏览 1提问于2015-02-08得票数 2
3回答
我有一个导航栏，其中包含链接到页面某些部分的标签列表。
我想知道是否可以通过javascript或css来更改链接的不透明度，当它被单击并显示内容时，当单击下一个列表项时将更改为活动不透明度，而旧链接将更改为正常。
下面是页面和底部导航栏的工作测试：
浏览 9提问于2013-03-10得票数 0
回答已采纳
3回答
我在我的页面上使用twitter引导，我有一个视频背景。看起来像这个。当用户向下滚动时，黑色部分开始出现，并首先将其不透明度设置为0，但当用户继续滚动时，当用户到达该部分的末尾时，它将更改为1。我想改变这一点，所以当该部分完全显示在屏幕上时，该部分的不透明度将被设置为1，因此当该组件在页面上完全可见时，用户将看到该组件的黑色背景。所以这是不好的：，但类似的是：，我试着使用：
$("#black").css("opacity",$("body").scrollTop()/1000);
但没起作用。你能帮我吗？
浏览 2提问于2015-07-30得票数 0
回答已采纳
如何设置工具栏和导航栏的透明颜色？我需要在整个屏幕上显示背景图像。但是我不能给出工具栏和导航栏的透明颜色。我分配了UIColor.Clear。但是没有用。它显示为黑色。
浏览 2提问于2011-04-08得票数 0
回答已采纳
在仅包含背景图像的部分上滚动时，导航栏将变为半透明和非活动状态。
我希望导航栏保持活动，同时保持其风格贯穿整个网站。
我在这里只使用HTML和CSS。如果我加了css，StackOverflow就不让我发帖，因为它说代码太多了。
有没有人能帮我弄清楚该为CSS写些什么来解决这个问题呢？
我只在小提琴中包含了相关的代码。
小提琴：
<header>
<div class="container">
<div id="branding">
<h1>Name</h1>
浏览 6提问于2017-08-02得票数 2
回答已采纳
我在navigationController中推送了一个viewController。
当按下此viewController时，导航栏附加在顶部(0.0，0.0)，并且
视图控制器的视图就附加在它的下面。(也许..0.0，44.0)
但是，我希望这个视图通过导航栏定位到(0.0，0.0)。
也就是说，视图的顶部必须覆盖在导航栏的下方。
感谢您的阅读。
浏览 2提问于2012-03-03得票数 0
回答已采纳
1回答
将不透明度更改为特定值
、、、
我正在制作一个导航条，当用户在更大的屏幕中滚动它时，它会慢慢可见。我不想让不透明变成
我希望导航栏至少是一点透明的，其中的字体具有不透明度值1。
我该怎么做呢？下面的代码使导航条的不透明度在滚动操作上完全是1。
$(window).resize(function() {
if ($(window).width() < 480) {
$('.navbar').removeClass("navbar-fixed-top");
$('.navbar').css('opacit
浏览 3提问于2016-09-07得票数 1
回答已采纳
我正在尝试决定工具提示还是弹出窗口..或者根据需要使用这两种方法。这是问题所在。
我在我的网站上有一个bootstrap顶部的固定导航栏。网站是白色的，导航栏是深蓝色的。
当使用工具提示时，它覆盖在导航栏上，并且有一点不透明，这我真的不喜欢。当使用弹出窗口时，它没有不透明度，但隐藏在顶部导航栏的后面。
所以我想这是一个双重问题，如果我想两者都用的话。如何去除工具提示的不透明度并使弹出框悬停在顶部栏上。如果可以选择同时使用这两种方法，那就更好了。
浏览 1提问于2012-10-23得票数 13
回答已采纳
1回答
我正在使用bootstrap构建我的第一个站点。我有一个反(黑色)条沿着页面的顶部运行，这是我的导航栏。在笔记本上看起来很棒，但是导航栏在小屏幕上是垂直的，覆盖了我的背景图像(一件艺术品)。我希望在顶部的黑条是足够不透明的，以允许背景图像通过一点发光。我已经在这个话题上搜索过了，但是我从之前的回复中尝试的都不起作用。
背景是如何部署的：
导航栏定义：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<a class=
浏览 0提问于2016-12-14得票数 0
1回答
谁能给我指出正确的方向，以达到类似于Netflix导航栏上显示的半透明效果。
我已经尝试了很多东西，但是我的导航栏太暗了，光线不够亮，所以滚动的时候我几乎看不到后面的颜色。
有没有什么办法可以增加透过视图的光线，从而使导航栏变得“更”透明？任何建议都很感谢。
浏览 2提问于2016-05-08得票数 0
2回答
我试着制作一个导航栏，当你按下它时，背景会突出显示，但当我这样做时，文本也会变得突出显示，不再可见(勉强)。
下面是我当前的HTML和CSS：
<header>
<img id="logoimg" src = "./images/home.jpg">
<ul class="top-nav">
<li><a href=''>Home</a></li>
<li><a href=&
浏览 3提问于2014-01-17得票数 0
回答已采纳
1回答
如何在导航栏的背景中切换
、、、
我用一些java脚本设置了导航栏，告诉它在浏览器中向上滚动时添加.top-of-page类，并且导航栏上有一个透明的背景。只要我开始向下滚动，导航栏上就会出现背景色。我试图实现的是一个.3秒左右的过渡，这样导航栏上的背景就会淡入淡出。我尝试了几种不同的方法，但都搞不清楚这一点，我对java脚本一点也不熟悉。
<script> $(window).on("scroll", function() {
var scrollPos = $(window).scrollTop();
if (scrollPos <= 0) {
$(
浏览 14提问于2018-01-24得票数 0
Q1如何使我的导航栏向下下拉菜单文本的中心，当我尝试使用text-align:center;时，它会影响我不想要的主导航栏文本。
Q2当用户悬停在下拉菜单上的页面名时，如何更改背景色的不透明度？
当用户悬停在下拉菜单上的页面上时，白色背景会影响下拉菜单上的白色文本。此外，我还想知道如何为这个部分创建自己的CSS，因为我认为，如果您在导航栏的背景颜色变成白色时，单击导航栏中的下拉菜单，则会影响主导航栏的不透明度。
下面是我的密码。
<!DOCTYPE html>
<html>
<head>
<html lang
浏览 7提问于2017-03-14得票数 1
1回答
我对这段代码有问题。一切都很完美(导航没有颜色，在我开始滚动后，背景开始变得有色)，除了当我进入网站时，背景是黑色的，第一次滚动后，它变得透明。如果我在页面上转一转，除了我进入页面之外，它工作得很好。
CSS
#header1 {
background-color:rgba(0, 0, 0, 1);
width:100%;
height:45px;
position: fixed;
top:0;
left:0px;
z-index:9100;
}
HTML
<div id="header1"></div>
浏览 17提问于2018-01-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
