个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
所以我有几个部分具有动态高度(基于视口(viewport))，我需要能够将 img 定位为部分之间的分隔线。我能想到的唯一方法是绝对定位图像。问题是我并不总是知道每个部分的固定高度是多少。
那么有没有一种方法可以添加一个相对于自身定位的部分，而不会从 position: relative 留下空白空间。
.section {
width: 100%;
height: 200px;
}
.divider1 {
position: absolute;
left: calc(50vw - 100px);
top: 150px;
}
.divider2 {
position: absolute;
left: calc(50vw - 100px);
top: 350px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="section blue"></div>
<div class="divider1">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section red"></div>
<div class="divider2">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green"></div>
</body>
</html>最佳答案
在 section 元素上将分隔符设置为伪元素(我使用了 ::after)。相对于 section 元素的底部定位伪元素。这样，部分的高度就可以改变，分隔符就会在正确的位置。
注意 - 你必须将 div 包装在一个容器中，这样我们就可以在最后一部分禁用 ::after。
.section {
position: relative;
width: 100%;
height: 200px;
}
.section:not(:last-child)::after {
position: absolute;
width: 200px;
height: 100px;
bottom: -50px;
left: calc(50% - 100px);
background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat;
background-size: contain;
content: "";
z-index: 1;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}<div>
<div class="section blue"></div>
<div class="section red"></div>
<div class="section green"></div>
</div>关于css - 绝对在 2 个 div 之间叠加图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41291832/
26
4
0
有人有 DirectDraw 叠加的工作示例(代码)吗？就像屏幕上移动的东西一样。我一直试图找到 DirectDraw 叠加用法的示例，但未能找到。 谢谢。 最佳答案 尝试其中一些: from gam
我在 JPanel 中显示缩略图。当将鼠标悬停在此类缩略图上时，我想在缩略图上方的叠加层中显示其完整版本。 使用 HTML，我只需创建一个具有适当位置和高 z-index 的 div，以便它覆盖其他所
好的，所以我想做一个覆盖屏幕。 因此，每当按键为 p 时，屏幕就会暂停并弹出一个屏幕，显示:“按‘q’退出或按‘c’继续，”类似的事情。 谁能告诉我怎么做？ 最佳答案 最简单的方法是使用子模块，然后为
查看我的代码: id mapped! DisplayName (user defined) mapped! Pr
我想为 QListWidget 或 QWidget 等小部件分配背景图像。这是想法: 理想情况下，背景图像会在其小部件大小发生变化时调整大小。有什么想法如何实现它吗？ 稍后编辑: 这是对话的屏幕截图，
我正在尝试设置一个授权方案，我在其中检查 1. 用户已登录 2. 用户有权访问某个对象。为此，我首先调用 maybeAuthId ，然后尝试获取当前对象，并“加入”到另一个列出权限的表。有两个级别的可
我想绘制两个系列的十个 fiddle 图，一个超过第二个: library(ggplot2) #generate some data coco1<-rnorm(10000,0,1) coco2<-c(
有谁知道如何触发在网格加载时显示的股票 jqGrid“正在加载...”叠加层？我知道我可以毫不费力地使用 jquery 插件，但我希望能够使我的应用程序的外观与 jqGrid 中已经使用的外观保持一致
我正在尝试在我的谷歌地图上实现“负”覆盖，类似于您在estately.com上获得的效果。基本上，我已经根据收集的 KML 数据成功绘制了 map 多边形。当有多个路径时，它们绘制得很好。 因此，对我
您好，我正在制作一个 Android 应用程序，它使用地理位置/Google map ，除了选项卡主机之外， map /应用程序上没有任何按钮。所以我需要它，所以如果用户点击 1500 毫秒，就会出现
我正在尝试叠加两个不同的 map ，但我无法叠加它们，并且我不知道如何解决此问题。 let bottom_left = ol.proj.fromLonLat([5.00975294202035
jquery 不是最好的，有人可以建议一个通用的方法来实现我想要实现的目标吗？我有一个照片网格，当它们被点击时，一个不透明的覆盖层将在整个图片之上动画化，覆盖层将包含一些动态设置的文本。我有图像和 o
我想问一下如何为我的 android 应用程序添加不同的叠加层？因为我已经有一个扩展 Overlay 的覆盖类，它根据 KML 文件中的某些点绘制多段线。现在我想创建另一个叠加层，使用 GPS 在用户
我目前正在使用谷歌地图并且是新手..我想知道是否可以将 map 划分为具有确定高度和宽度的某些 tiles 并为它们 color ..如果是，那么有人可以解释如何去做因为我面临困难。 最佳答案 我认为
我有一个用于在我的 MapView 上绘制路径的叠加层，但我注意到它每秒被不必要地重绘大约十次。由于在 draw 方法中我绘制了路径的每一段，这很容易成为效率问题。 出于这个原因，我决定缓存叠加层的内
我是 AR 的新手。但我对我想做什么有一个大概的想法。 我想在 Android 中将 UI 元素叠加在相机输入之上。 这些 UI 元素将根据陀螺仪、gps 输入、通过蓝牙、wifi 等实时更新。 类似
我有一个带有 .xib 的 UICollectionViewCell。 这是 xib 文件的结构 您可以看到同一级别的每个元素以及 3 个 ImageView 和一个按钮。但在运行时，这些元素前面有一
我有一个关于在哪里存储 map 覆盖的大图像的问题。 图片约100MB，不能缩小或在线存储(要求)。我一直在考虑使用 Assets 目录(xcassets)，但它似乎适用于在不同设备上需要调整大小的图
我的应用程序的 css 覆盖了 SmartGWT 中的一些样式并真正降低其性能。 如果我使用 css 文件运行我的应用程序，它太慢了，我什至无法将鼠标悬停在 ListGrid 小部件上。但是，如果我取
我正在制作一个网页，但遇到了问题。当屏幕为 980 像素或更小时，菜单会自行隐藏，屏幕上会出现类似“汉堡包”的按钮菜单。当您单击该按钮时，一个 div 会占据整个屏幕并显示菜单(效果很好)。但是，当您
我是一名优秀的程序员,十分优秀！