-
2020-12-20 15:58:56
我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.
html,body {
height: 100%;
width: 100%;
}
body {
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.sphere {
display: flex;
background: black;
border-radius: 300px;
height: 100px;
width: 100px;
}
.container:after {
display: flex;
background: #FFF;
border-radius: 300px;
height: 130px;
width: 130px;
animation: pulsate 2.5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
content: "";
z-index: -1;
margin: auto;
}
@keyframes pulsate {
0% {
transform: scale(0.1,0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.2,1.2);
opacity: 0.0;
}
}
方法:
我目前正在使用flexbox将容器div置于一个圆圈内部,并在容器上用一个标签来创建脉冲.我尝试过使用z-indexing(似乎没有做任何事情)和绝对定位(需要硬编码的px值,我想远离它).
有没有一种优雅的方法来使用flexbox实现这一目标?
期望的效果:
This is close,但是如果可能的话,我想放弃使用:after元素的px值.
更多相关内容 -
MapInfo点对象重叠问题的解决方案研究 (2014年)
2021-05-09 09:50:33由于数据来源、精度或者误操作等多种原因,基于MapInfo建立矢量地理信息系统数据库时经常会出现点对象重叠问题。在对不同的重叠情况进行判别的前提下,提出通过MapInfo自身的工具、矢量数据对外交换与Microsoft ... -
如何将一个div与另一个div重叠
2021-06-09 02:00:09接受的解决办法效果很好,但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容,并将重要的CSS与不相关的样式CSS区分开来。另外,我还详细解释了CSS定位是如何工作的。TLDR;如果您只想要代码,请...接受的解决办法效果很好,但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容,并将重要的CSS与不相关的样式CSS区分开来。另外,我还详细解释了CSS定位是如何工作的。
TLDR;如果您只想要代码,请向下滚动到结果.
问题
有两个独立的同级元素,目标是定位第二个元素(使用id的infoi),因此它出现在前面的元素(带有class的navi)。无法更改HTML结构。
拟议解决方案
为了达到预期的结果,我们将移动,或定位,第二个元素,我们将称之为#infoi因此,它出现在第一个元素中,我们将称之为.navi..具体来说,我们想#infoi的右上角.navi.
CSS职位所需知识
CSS有几个用于定位元素的属性。默认情况下,所有元素都是position: static..这意味着元素将按照其在HTML结构中的顺序进行定位,很少有例外。
另一个position值是relative, absolute,和fixed..通过设置元素的position对于这3个值中的一个,现在可以使用以下4个属性的组合来定位元素:top
right
bottom
left
换句话说,通过设置position: absolute,我们可以添加top: 100px若要从页面顶部定位元素100 px,请执行以下操作。相反,如果我们bottom: 100px元素将从页面底部定位为100 px。
这里是许多CSS新手迷路的地方 - position: absolute有一个参照系。在上面的示例中,参考框架是body元素。position: absolute带着top: 100px表示元素被定位。100px从顶部body元素。
可以通过设置position的父元素的除position: static..也就是说,我们可以通过提供一个父元素来创建一个新的职位上下文:position: absolute;
position: relative;
position: fixed;
例如,如果
元素给出position: relative,任何子元素都会使用作为他们的立场背景。如果给出一个子元素position: absolute和top: 100px元素的位置为100 px。元素,因为现在是职位上下文。另一个因素意识到IS堆栈顺序-或者元素是如何在z方向堆放的。这里必须知道的是元素的堆栈顺序,默认情况下,元素的顺序是由HTML结构中元素顺序的反向定义的。考虑以下示例:
BottomTop在这个例子中,如果两个
元素位于页面上相同的位置,Top元素将覆盖Bottom元素。自Top后来居上Bottom在HTML结构中,它具有较高的堆叠顺序。div {position: absolute;
width: 50%;
height: 50%;}#bottom {
top: 0;
left: 0;
background-color: blue;}#top {
top: 25%;
left: 25%;
background-color: red;}
BottomTop可以使用css使用z-index或order财产。
我们可以忽略这个问题中的堆叠顺序,因为元素的自然HTML结构意味着我们想要出现的元素top在另一个元素之后。
所以,回到手头的问题-我们将使用位置上下文来解决这个问题。
解
如上所述,我们的目标是将#infoi元素中的.navi元素。为此,我们将包装.navi和#infoi新元素中的元素
所以我们可以创建一个新的职位上下文。然后通过以下方式创建一个新的职位上下文.wrapper a position: relative..wrapper {
position: relative;}
有了这个新的职位上下文,我们可以定位#infoi内.wrapper..首先,给#infoi a position: absolute,允许我们定位#infoi绝对在.wrapper.
然后添加top: 0和right: 0若要将#infoi元素位于右上角。记住,因为#infoi元素正在使用.wrapper作为其位置上下文,它将位于.wrapper元素。#infoi {
position: absolute;
top: 0;
right: 0;}
因为.wrapper只是一个容器.navi,定位#infoi在右上角.wrapper的右上角的效果。.navi.
我们得到了它,#infoi的右上角.navi.
结果
下面的示例可以归结为基本的内容,并包含一些最小的样式。/*
* position: relative gives a new position context
*/.wrapper {
position: relative;}/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
备用(无包装)解决方案
在这种情况下,我们不能编辑任何HTML,这意味着我们不能添加一个包装元素,我们仍然可以达到预期的效果。
而不是使用position: absolute在#infoi元素,我们将使用position: relative..这允许我们重新定位#infoi元素的默认位置。.navi元素。带着position: relative我们可以用否定词top值将其从默认位置向上移动,并且left价值100%减去几个像素,使用left: calc(100% - 52px)把它定位在右边。/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
-
yolov4检测框重叠怎么办?
2021-07-25 15:51:55刚接触yolov4,知道v4有非极大值抑制,但是不知道如何修改,修改了会不会造成更多的漏检?还是说是因为我训练集的问题 -
论文研究-具有稀疏特征的对象—属性子空间边缘重叠区域归属算法.pdf
2019-07-22 19:33:02通过分析具有稀疏特征的对象—属性子空间的特征, 发现其边缘存在交叉重叠区域现象, 为此, 提出了基于聚类思想的具有稀疏特征的对象—属性子空间边缘的重叠区域归属算法OASEDA, 该算法能有效解决对象—属性子空间的... -
[第6讲]手把手教你WebAccess-动态对象与静态对象的重叠.flv
2019-10-25 02:09:17[第6讲]手把手教你WebAccess-动态对象与静态对象的重叠flv,WebAccess-动态对象与静态对象的重叠 -
JavaScript程序设计06.习题 (3).ppt
2020-05-15 15:53:30习 题 9-1 以下哪个选项不属于CSS样式的特点 A将显示格式和文档结构分离 B. 体积更小加快网页下载速度 C.... Class选择符 C.... #选择符 9-3 若要在网页中实现两个DIV对象重叠效果需要应用样式表定义中的 A z-inde -
具有稀疏特征的对象―属性子空间边缘重叠区域归属算法 (2013年)
2021-06-11 14:20:56通过分析具有稀疏特征的对象―属性子空间的特征, 发现其边缘存在交叉重叠区域现象, 为此, 提出了基于聚类思想的具有稀疏特征的对象―属性子空间边缘的重叠区域归属算法OASEDA, 该算法能有效解决对象―属性子空间的... -
div透明与两个div重叠位置设置
2019-03-13 17:18:25表示div的位置,z-index越大越在上面,这里-1表示两个div重叠另一个div没有赋值这两个属性那么还想再它下面就给:-1。 */ .opacity{position:absolute;width:100px;-khtml-opacity:0.2;-moz-opacity:0.2;filter:...最近需要做一个页面动态文字水印,就是在每个页面显示登录人、访问时间、访问模块等一些基本信息的水印。然后了解了一下水印经过特殊处理的div展现。
- 网上找的一个css样板。
<div> <p>绿色背景</p> <div class="box"><b onclick="javascript:alert('文字部分');">文字部分</b></div> <p>绿色背景+30%透明度</p> <div class="box opacity">文字部分</div> </div>
- css样式
.box{width:100px;height:100px;background:green;margin-bottom:50px;text-align:center;color:red;line-height:100px;} .opacity{-khtml-opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);filter:"alpha(opacity=30)";opacity:0.3;}/*这个ie8不产生效果,ie不支持opacity属性(透明度)*/ /*兼容ie8:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); div重叠:position:absolute; z-index:-1;表示div的位置,z-index越大越在上面,这里-1表示两个div重叠另一个div没有赋值这两个属性那么还想再它下面就给:-1。 */ .opacity{position:absolute;width:100px;-khtml-opacity:0.2;-moz-opacity:0.2;filter:alpha(opacity=20);filter:"alpha(opacity=20)";opacity:0.2; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);z-index:-1 /*兼容ie8及以下*/}
- 效果
ie8不兼容状态
-
非重叠摄像机网络中一致标记的跟踪对象的分布式贝叶斯推理
2021-03-10 14:08:01非重叠摄像机网络中一致标记的跟踪对象的分布式贝叶斯推理 -
unity 在地图随机生成不重叠对象
2019-09-05 18:53:12 -
MATLAB用拟合出的代码绘图-DOC:差异重叠曲线分析
2021-05-21 16:59:09MATLAB用拟合出的代码绘图 DOC:差异重叠曲线分析 这是由以下人员提出的DOC分析的实现 此实现在一个重要方面与原始实现不同: 代替对观察到的数据仅计算...合并两个或多个DOC对象,并绘制整个图 # The names (res1, res -
JS_js检测数组对象中是否有重复值
2021-04-22 13:49:20var arry = [{ itemType: "1", item_id: "86753", organizationId: "3117", price: "1000", qty: "1", }, { itemType: "1", item_id: "86753", organizationId: "3118", price: "1000", ... -
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
2020-12-13 14:15:001、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了... -
两个DIV或多个DIV顺序重叠加
2021-06-09 02:00:24DIV堆叠 CSS让DIV层叠、...重叠格局必要主要CSS名目抒发1、z-index重叠挨次属性2、position:relative和position:absolute设置装备摆设对象属性为可定位(可堆叠)3、left right top bottom绝对定位详细位子设置配合... -
UGUI中任意两个对象是否重叠
2019-06-10 15:43:52最近在做一款拼图游戏,由于要设计到拖拽判断,UGUI中如何更方便的判断两个图片是否重叠呢?可参考如下方法: public static bool IsRectTransformOverlap(RectTransform rect1, RectTransform rect2) { ... -
基于多功能融合和增量学习的跨多个不重叠摄像机视图的视频对象匹配
2021-03-09 23:42:24基于多功能融合和增量学习的跨多个不重叠摄像机视图的视频对象匹配 -
Unity问题总结:相机渲染问题,对象层叠问题
2022-01-25 01:38:48首先是今天做项目发现有的时候相机会在远处的地方渲染不出物体来, 明明离右边的物体更近了,但是却渲染不出来?...默认创建的对象在同一层,有的时候会这样挡住,刚开始尝试调z轴,确实有效,但是因为z轴... -
论文研究-基于种子边的重叠社团发现算法.pdf
2019-07-22 17:59:35针对这一现状提出了基于种子边的重叠社团发现算法,该算法以边作为研究对象,主要思路是利用权重系数给出边的重要性排序,选出其中的种子边作为初始社团并对其进行扩展。最后,在Enron数据集上对算法进行了验证,并... -
Leetcode 836:矩形重叠(超详细的解法!!!)
2020-12-21 23:57:03如果相交的面积为正,则称两矩形重叠。需要明确的是,只在角或边接触的两个矩形不构成重叠。 给出两个矩形,判断它们是否重叠并返回结果。 示例 1: 输入:rec1 = [0,0,2,2], rec2 = [1,1,3,3] 输出:true 示例 2:... -
Threejs中的透明对象、模型的重叠部位显示错误
2022-01-07 10:17:52根据需求,制作了一个平面看板,在外部模型之上,但是某些角度常常出现透明对象的模型重叠后显示错误的问题。 在threejs中,使用深度缓冲(Z-Buffer)来完成场景可见性计算,即确定场景哪部分可见,哪部分不可见... -
CAD中怎样快速删除重复图元、块等一些重叠对象
2020-12-21 14:42:47在AutoCAD2016版本里面,命令【62616964757a686964616fe58685e5aeb931333337616536overkill】(其它的版本不清楚有没有),可以删除重叠的对象(包括直线,多段线,文字等等)安装天正插件,里面有【删除重元】功能,把... -
大间距上保护层重叠开采卸压效果研究-论文
2021-07-08 10:42:32选取平煤八矿一采区作为研究对象,通过FLAC~(3D)数值模拟方法结合现场钻屑量实测结果,分析了大间距上保护层对下层煤的卸压保护效果。研究结果表明:丁组煤层开采对戊组煤层卸压效果42%,倾向卸压角为下帮75°、上帮65°... -
两个div的重叠效果,上层透明
2013-09-12 22:21:30与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域... -
圆重叠去除器:从重叠圆对中去除一个或两个圆(带公差)。-matlab开发
2021-05-30 13:17:03此功能包括 3 个选项来处理重叠的圆圈: 1.... 此函数用于“检测和计数具有圆形特征的对象”博客文章: http : //imageprocessingblog.com/detecting-and-counting-objects-with-circular-features/ -
Altium AD20如何选择重叠在下方的元件?如何对元件快速选择、选择区域内部、选择矩形接触到的对象
2021-05-09 14:15:43比较常用的有 选择框选区域内部的元件、选择矩形接触到的对象、选择线接触到的对象、选择重叠(可在同一位置重叠的元件间切换,适合选择重叠在下方的元件)。 1、选择框选区域内部的元件 按住鼠标左键,从左上向... -
Python OpenCV分水岭算法分割和提取重叠或有衔接的图像中的对象
2020-05-12 13:33:09本文将介绍如何使用分水岭算法对触摸和重叠的图像中的对象进行分割和提取。 参考:https://www.pyimagesearch.com/2015/11/02/watershed-opencv/ 分水岭算法是一种分割的经典算法,在提取图像中连接或重叠的图像中的... -
Unity3D 碰撞体重合问题解决
2021-07-09 22:39:54开发2D游戏中,由于物体施加力发生碰撞后,2个物体间会产生嵌入导致卡住的情况。 解决方法: -
判断两个矩形是否重叠
2019-10-17 21:29:23用一个对象的数据来表示一个矩形的位置和大小: { x: 100, y: 100, width: 150, height: 250 } 它表示一个宽为150高为250的矩形在页面上的(100, 100)的位置。 请你完成一个函数isOverlap可以接受两个矩形...