html - box-shadow 不显示在背景图像之上-6ren

html - box-shadow 不显示在背景图像之上

转载作者：太空宇宙更新时间：2023-11-03 22:21:23

25

4

所以我在一个视差风格的网站上创建了一个导航栏，我希望在导航栏下方的图像顶部显示一个阴影，但阴影在图像顶部不可见，但在图像下方.我将通过下面的图片向您展示我的意思:

/image/GL10W.png

这里你看到的是阴影，没有背景图片...

/image/QW6kk.png

...但在这里你不能，因为导航栏下方的图像。

我已经尝试过 z-index，但它不起作用。

有没有办法让你能看到影子？

评论中的jsfiddle

编辑:非常感谢大家!你真的帮了我:)

最佳答案

在 .section-nav 上设置 z-index 没有任何作用，因为它没有定位。

所以可能的解决方案是(除了 Jeremy 的，它也有效):

像 pimg 一样将 .nav-section 设置为 position: relative，这样它自己的 z-index 就可以工作了。
或者将.pimg1和.pimg2的z-index设置为-1，让它们在导航部分后面。
<

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,900');


/* ---------- GLOBAL STYLES ---------- */

* {margin: 0; padding: 0; box-sizing: border-box;}

body {
	height: 100%;
	font-family: 'Libre Franklin', 'Helvetica Neue', helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	color: #222;
}

.wrapper {
	width: 72%;
	max-width: 1000px;
	margin: auto;
}

.section {
	padding: 30px 50px;
}

.section-light {
	background-color: #fff;
}

.section-dark {
	background-color: #222;
	color: #fff;
}


/* ---------- NAVIGATION STYLES ---------- */

.section-nav {
	z-index: 99;
	padding: 0;
	border-bottom: 1px solid #767676;
	box-shadow: 0px -20px 300px rgba(0, 0, 0, 1);
}

.section-nav ul {
	display: block;
	height: 72px;
	display: flex;
	align-items: center;
}

.section-nav ul li {
	text-align: left;
	display: inline-block;
	margin-right: 37px;
}

.section-nav ul li a {
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.section-nav ul li a.active {
	color: #767676;
}

.pimg1, .pimg2 {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;    /* changed */
}

.pimg1 {
	background-image: url('https://i.ibb.co/D9D8mZq/img1.jpg');
	min-height: 100vh;
}

.pimg2 {
	background-image: url('https://i.ibb.co/n6J2pTs/img2.jpg');
	min-height: 100vh;
}

<!DOCTYPE html>
<body>
	
	<div class="pimg1"></div>

	<section class="section section-light section-nav">
		<div class="wrapper">
			<ul>
				<li><a href="/" class="active">Home</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="projekt.html">Das Projekt</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
			</ul>
		</div>
	</section>

	<div class="pimg2"></div>

	<section class="section section-light">
		<h2>Section 2</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa aliquid natus, consequuntur quasi dolorum, mollitia corrupti reprehenderit molestiae sequi ipsa quod minima, ullam saepe recusandae commodi nostrum obcaecati adipisci rerum atque omnis labore. Voluptatum quasi laborum ut cupiditate est ea, sequi tempora mollitia repudiandae autem nulla neque tenetur voluptate ducimus laudantium.
		</p>
	</section>

</body>

关于html - box-shadow 不显示在背景图像之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53504677/

25

4

0

文章推荐： C# 进度条设计模式

文章推荐： node.js - 值被最新请求机器人的人覆盖吗？

文章推荐： c# - 无法在虚拟机上获取 ip 地址

文章推荐： node.js - 如何在 sails.js 0.12 cors.js 文件中添加多个源

rust - 有什么方法可以将 Box> 转换为 Box> 吗？
考虑这样的代码: trait Foo { fn foo(&self); } fn consume_func(b: Box>) { unimplemented!(); } fn prod
rust - 有什么方法可以将 Box> 转换为 Box> 吗？
考虑这样的代码: trait Foo { fn foo(&self); } fn consume_func(b: Box>) { unimplemented!(); } fn prod
rust - 我是否需要对 Boxed 结构的 Box 子结构进行 Box 处理才能将所有内容都放在堆上？
我不明白在 Rust 中，当我们 Box 父结构时，结构中的结构发生了什么。 struct Outer1 { child: Inner1, } struct Inner1 { n: i
css - * { 盒子尺寸 : border-box; } : To border-box or not to border-box all elements?
我将开始开发一个新网站，并准备处理浏览器用于计算元素宽度和高度的不同方法 (box model stuff)。不知何故，我想到了:如果我只是将 box-sizing 应用于网站中的所有元素会怎么样？
box - 由于网络错误而无法连接到 Box API？
在 java 应用程序中使用 box java sdk 访问 box api 时，我遇到了下面提到的错误。请指出此问题的原因。 Exception in thread "main" com.box.s
css - box-sizing - 'outline' 在 'border-box' 或 'content-box' 中计算？
计算盒子的宽高时，outline width like outline: 5px dashed red; 如果 box-sizing:border-box，框的宽度/高度是否会考虑轮廓？最佳答案我
rust - 如果 Box 不是 Box 的子类型，其中 B : A?，这意味着 Box 是协变的是什么意思
读完the subtyping chapter of the Nomicon ，我无法理解类型参数的协方差。特别是对于 Box类型，描述为:T is covariant . 但是，如果我写这段代码:
rust - 为什么 &'a Box treated as &' a Box and not &' a Box？
给定这段代码: trait Trait {} struct Child; impl Trait for Child {} struct Father { child: &'a Box, } i
box-api - box.com 有可用的文件选择器吗？
与文件 chooser for dropbox 类似，box.com 有没有？最佳答案 Box 目前不维护自己的“文件选择器”；然而，有一个很棒的服务叫做 filepicker.io，它充当几乎所有
box-api - Box API 返回的流位置不能用于跟踪事件
感谢您对我的问题的回复:Is this a bug of Box API v2 when getting events 这是一个与此相关的新问题。问题是我不能可靠地使用从以前的调用中获得的 next_
box-api - 在 Box 请求中使用用户身份
我试图让 Box Enterprise API 使用 As-User 工作。我有一个管理员帐户，我用它来尝试检索子帐户中的内容。我首先使用管理员帐户检索子帐户的用户ID。并将用户 ID 添加为字段“
box-api - 有没有办法从 Box 帐户热链接图像
我想在一个简单的导轨中本地查看我的 Box 帐户中的图像 app .目标是使用这些图像进行幻灯片放映。我寻找必要的参数来传递每个图像相关 url成标签。看来我只能下载图像，或从 Box 应用程序中查看
casting - 为什么我不能将具有扩展特征的 Box 转换到具有基本特征的 Box？
这个问题在这里已经有了答案: Why doesn't Rust support trait object upcasting? (5 个答案) 关闭 4 年前。给定代码 trait Base {
python - 提供了断言错误 : The algorithm only supports as action spaces but Box(-1. 0, 1.0, (3,), float32)
所以基本上我尝试从https://github.com/Gor-Ren/gym-jsbsim转换这个自定义健身房环境。使用farama基金会的gymnasium api。这是我正在处理的存储库:htt
box-api - BOX v2 API，用于覆盖文件或在尝试上传之前检查文件是否存在
我是BOX API的新手，因此正在使用API的v2。我正在从我的应用程序本地进行REST调用。我想上传一个以前可能上传或未上传的文件。我知道父文件夹ID和文件名。我需要覆盖现有文件，或者至少要再
box-api - 如何在没有 Box 授权页面的情况下获取访问 token
我已被授予访问(协作)文件夹的权限。我需要的是每天访问该文件夹并从中获取文件。现在我生成的开发者 token 将在 1 小时后过期。有什么办法可以得到authorization code没有第一站，它
box-api - 来自 box.com 的文件列表
我正在尝试将 Box 中上传的文件与另一个外部系统同步。我使用哪些 API 来获取“在给定 dd/mm/yy hh:mm:ss 后上传/更新的所有文件的列表”？干杯! 最佳答案我认为User Ev
Vagrant "box"与 "base box"，有区别吗？
Vagrant 文档和 CLI 使用术语“box”和“base box”。命名意味着基本框是一种特定类型的框，但是，这些术语似乎被用作同义词。 Vagrant“盒子”和 Vagrant“基础盒子”之间
box-api - 您可以使用 box API 获取文件夹的标签吗？
Box 允许您为文件夹创建标签，但如何从 API 中获取该信息？我在 GET /folders/{id} API 中没有看到标签返回.标签也不被视为元数据。最佳答案如果你看看 Fields wri
box-api - Box v1 api 何时停止运行？
我正在尝试确定应该使用哪个版本的 Box api。我的决定取决于 v1 api 的 EOL 时间线。我不想完成我的应用程序，就在应用程序发布之前(或之后不久)，v1 api 停止工作。我很乐意使用

首页

博学

6Ren·AI

商城

html - box-shadow 不显示在背景图像之上