html - 如何将阴影 'wings' 添加到居中的内容 div-6ren

html - 如何将阴影 'wings' 添加到居中的内容 div

转载作者：行者123 更新时间：2023-11-28 01:19:20

25

4

我有一个 stylized page我一直在使用它来练习 JavaScript，但最近我发现我的一些 CSS 阻止了我的文档监听器听到针对嵌入式元素的鼠标点击，超出了罪魁祸首 CSS 的目标。

罪魁祸首 CSS

.backDrop {

  background-color: #FFF;
  height: 100vh; width: 720px;
  margin: auto;
  /*box-shadow: creates ill-desired corners;*/
}
.backDrop:before {

  box-shadow: 0 0 20px -20px black;/* shrinks and blurs for a soft shadow*/
  content:'';
  height: 200vh;
  position: absolute;	/* <-- THIS  [but there's no shadow without it]*/
  width: 720px;
}

所以为了避免这个问题，我实现了一个父类 div分类 wrapper和嵌入式 backDrop和两个姐姐一起div分类backDrop_leftShadow和 backDrop_rightShadow到它的每一面。然后我创建了两个交替定向的水平渐变背景图像，从黑色渐变到透明，并将它们分配给我的“翅膀”的 CSS div

每个div遵循正常的缩进方案，但我不得不用  将它们彼此分开s 以防止空白弄乱呈现的布局。从那里我移动了 viewWidth和 margin CSS 来自 backDrop至 wrapper并替换了 viewWidth单位 backDrop百分比和像素单位。我制作的渐变宽度为 7 像素，所以我制作了 wrapper比 backDrop 宽 14 像素每个翅膀div 7 像素宽。然后我尝试了 display: inline-block, inline, block; 的所有组合我能想到的在CSS中给各位姐姐div里面wrapper --但似乎没有任何效果。

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
  element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
  return x * x;
}

body {

 background-color: #3A3C3D; 		/*alt color #CCA #3A3C3D*/
 margin: 0;
 overflow: hidden;					/*top stop the extended shadow element height from causing the page to scroll*/
}



.backDrop {

 background-color: #FFF; 			/*alt colors #ACA null #CCA*/
 display: inline-block;
 height: 100%; width: 720px;
}
.backDrop_leftShadow {

 background-image: url("http://s14.postimg.org/7p3o980el/left_shadow.png");
 background-repeat: repeat-y;
 display: inline-block;
 height: 100%;
 width: 7px;
}
.backDrop_rightShadow {

 background-image: url("http://s14.postimg.org/cc9qaznrh/right_shadow.png");
 background-repeat: repeat-y;
 display: inline-block;
 height: 100%;
 width: 7px;
}



.wrapper {

 background-color: red;
 width: 734px;
 margin: auto;
}



.interface {

 background-color: rgba(255, 0 , 0, 0);
 background-image: url("../code/assets/experimenting pot/img/isometric platforms.png");
 border-left: 2px solid red;
 border-radius: 5px;
 box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
 margin: auto;
 height: 270px; width: 480px;
}



.lineBreak {

 height: 16px;
}

<body><!--All the comments you'll see below are meant to null white space between layout elements--><!--
 --><div class="wrapper"><!--
     --><div class="backDrop_leftShadow"></div><!--
     --><div class="backDrop" id="backDrop"><!--
         --><div class="lineBreak" id="addItem">click here to square</div><!--
         --><div class="lineBreak"></div><!--
         --><div class="interface">yo</div>
        </div><!--
     --><div class="backDrop_rightShadow"></div></div>

	<!--<script language="javascript" type="text/javascript" src="../javascript/viewportControl.js"></script>-->

	</body>

注意:我试图将我的渐变上传到图像托管站点，以便可以从此处加载它们，但我似乎也无法使其正常工作。如果有人知道怎么做，我会很乐意解决这个问题。 --但更有趣的是，确切的代码产生了两种不同的渲染，仅取决于它是否被渲染 locally或通过 stackoverflow .当this这就是我想要的。或者更准确地说，正如我已经说过的，this . --“STACKOVERFLOW”和“LOCAL”文本是使用图像编辑器编辑的。

最佳答案

您尝试的第一个解决方案的问题与伪元素的定位有关。由于它有 position:absolute，它位于其他元素之上，这导致了问题。

您也可以通过使用 z-index 轻松解决该问题:如果您将 z-index 的值设置为 -1，该元素将位于堆栈，不会影响事件监听器。

这是使用您的代码的演示:

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
  element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
  return x * x;
}

body {

 background-color: #3A3C3D; 		/*alt color #CCA #3A3C3D*/
 margin: 0;
 overflow: hidden;					/*top stop the extended shadow element height from causing the page to scroll*/
}


.backDrop {

  background-color: #FFF;
  height: 100vh; width: 720px;
  margin: auto;
  /*box-shadow: creates ill-desired corners;*/
}
.backDrop:before {

  box-shadow: 0 0 20px black;/* shrinks and blurs for a soft shadow*/
  content:'';
  height: 200vh;
  position: absolute;	/* <-- THIS  [but there's no shadow without it]*/
  width: 720px;
  z-index:-1;
  margin-top:-20px; /* to avoid the issue with the borders that you commented */
}

.wrapper {

 width: 734px;
 margin: auto;
}



.interface {

 background-color: rgba(255, 0 , 0, 0);
 background-image: url("../code/assets/experimenting pot/img/isometric platforms.png");
 border-left: 2px solid red;
 border-radius: 5px;
 box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
 margin: auto;
 height: 270px; width: 480px;
}



.lineBreak {

 height: 16px;
}

<body><!--All the comments you'll see below are meant to null white space between layout elements--><!--
 --><div class="wrapper"><!--
     --><div class="backDrop" id="backDrop"><!--
         --><div class="lineBreak" id="addItem">click here to square</div><!--
         --><div class="lineBreak"></div><!--
         --><div class="interface">yo</div>
        </div></div>

	<!--<script language="javascript" type="text/javascript" src="../javascript/viewportControl.js"></script>-->

	</body>

第二部分与使用百分比作为高度值有关。需要设置 parent 的高度，否则百分比会失败(因为 0 的 100% 是 0)。

关于html - 如何将阴影 'wings' 添加到居中的内容 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34439110/

25

4

0

文章推荐： javascript - AngularJS Orderby 属性名称中带有空格

文章推荐： c++ - 如何在与打开窗口的函数不同的函数中使用绘图函数？

文章推荐： html - 无法在 Bootstrap 中对齐图像

【Wing】背后的插件们
wing 作为我们日常开发的命令行开发工具，项目开源以来，陆陆续续接入了多个插件，在这里集中分享给大家。 ☞ Github ☜　　☞ Gitee ☜ 01. wing -screen 作为And
python - Wing IDE 不会在断点处停止
我正在运行一个调用 C++ 框架函数和 python 模块的项目，我可以在 Wing IDE 上毫无问题地运行它(个人版)。但是，我无法在运行时进行调试。它只让我调试某个文件，这没什么用。我调用 sh
python - Wing IDE 调试服务器在探测本地时遇到错误
我正在使用 Python 2.4 运行 Wing IDE 5。一切都很好，直到我尝试调试并设置断点。到达断点时我收到一条错误消息:“调试服务器在探测局部变量或全局变量时遇到错误...” 堆栈数据显示如
Wing FTP Server FTP服务器端安装使用教程
Wing FTP Server 是一个专业的跨平台FTP服务器端，它拥有不错的速度、可靠性和一个友好的配置界面。它除了能提供FTP的基本服务功能以外，还能提供管理员终端、任务计划、基于Web的管理端
html - 如何将阴影 'wings' 添加到居中的内容 div
我有一个 stylized page我一直在使用它来练习 JavaScript，但最近我发现我的一些 CSS 阻止了我的文档监听器听到针对嵌入式元素的鼠标点击，超出了罪魁祸首 CSS 的目标。罪魁祸
Python:使用 Wing IDE 导入模块
我是 Python 的新手，我无法使用 Wing IDE/Python 2.7/Mac OS 导入模块我读过: Import module from other directory in Wing
python - 使用 Wing IDE 重命名对象
我的 Python 代码刚刚从 Eclipse 过渡到 Wing IDE。在 Eclipse 中，我可以选择“重命名”对象。我可以采用我的代码中定义的任何对象，它可以是变量、函数、方法或其他任何东西，
java - 像素周围点云(不是点或平面)上的 HotTest-wing
我想找到点云中距离屏幕上的像素更近的所有点。就像围绕该像素进行光线转换并返回点云点(而不是 arccore 跟踪的点/平面对象)。我尝试过使用Frame.hitTest(xPx,yPx)，但这只适用
python - 使用 Wing IDE 调试多线程 Python
我正在使用 Wing IDE 调试多线程 Python 程序。当我按下暂停按钮时，它仅暂停一个线程。我已经尝试了十次，它总是暂停同一个线程，在我的例子中称为“ThreadTimer Thread”，
javascript - Wing IDE 中的 CoffeeScript 语法高亮显示
有谁知道在 Wing IDE 中获得 Coffeescript 文件语法高亮显示的方法吗？我已经将它设置为突出显示，就好像它是一个 javascript 文件一样，它可以正常工作，但它缺少一些东西，特
c# - 从 C# 启动 Wing 的问题
我有这段代码: void wing() { Process wing = new Process(); wing.StartInfo.UseShellExecute = true;
html - 如何让 SVG 中的 Wings 移动？
我用 SVG 制作了这个简单的翅膀，你可以在这里看到 -> http://codepen.io/anon/pen/aOwXGo 我的问题是:如何让它们移动？？我应该从哪里开始？谢谢 :) SVG:
python - Wing IDE 是否有 Eclipse 个性设置？
虽然 PyDev 被证明是一个很棒的 Python IDE，特别是如果您是一名习惯于所有 eclipse ubercool 导航的前 Java 开发人员，但它仍然缺乏 Wing 拥有的一些功能，例如用
python - 从另一个文件夹导入 Python 文件时无法获得建议 (Wing IDE)
我有一个名为 caller.py 的 Python 文件，位于 C:\Temp。我还有另外两个 Python 文件:位于 C:\Temp 的 local_teSTLib.py 和位于 C:\Temp\
html - 最小宽度 : 960px with centered layout and additional 'wings'
目标是让 min-width: 960px; 具有居中布局和额外的“翅膀”以获得更大的屏幕。查看当前使用负边距的实现:http://dl.dropbox.com/u/8313423/wings.ht
python - Wing IDE 中的 Matlab sytle 变量编辑器
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
css - 使用纯 css 创建 'wing' Angular 技巧
这个问题在这里已经有了答案: Add outward curving border to elements like this: ◝◟___◞◜ (3 个答案) 关闭 7 年前。
python - 在 Wing IDE 中安装 Pandas 导入错误
我在导入 Pandas 时遇到了一些重大问题，这让我发疯。我使用从终端安装了 Pandas pip install pandas 以及所有依赖项。现在，当我尝试导入 pandas 时，我得到了 I
python - 如何在 Wing IDE 中终止 Python shell？
我是 Python 的新手，一直在使用 Wing IDE 来试用这些功能。我环顾四周时发现的一件事是如何在执行不会很快终止的命令时强制终止 Python shell。一个例子是: import mat
python - Wing IDE 不会在 Google App Engine 的断点处停止
我是 Python、Wing IDE 和 Google 云应用的新手。我一直在尝试让 Wing IDE 在本地 (Windows 7) Google App Engine 的断点处停止。我正在使用固

首页

博学

6Ren·AI

商城

html - 如何将阴影 'wings' 添加到居中的内容 div