css重叠边界,关于css:两个重叠元素上的边界半径; 背景闪耀
我使用2个重叠元素制作了CSS进度栏。 元素的CSS如下:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
代码>
不幸的是,您可以在这张图片中清楚地看到来自父级的背景的一部分在右侧边缘。 由于子元素的背景应与父元素精确重叠,因此我不知道为什么会这样。
[使用Firefox 4拍摄的照片]
也许有人可以向我解释为什么会这样以及如何解决呢?
顺便说一句-不错的视觉效果。 大有帮助。
这是一个已知的问题。解决它的一种方法是在需要彩色边框时嵌套圆形元素。用与边框宽度相同的数量填充另一个框。
可以在@gonchuki的此博客文章中找到更多信息:Standards Compliancy是一个谎言(或者,所有浏览器的边框半径是否损坏)
啊。抱歉。我看错了你的问题。您的元素中没有边框。症状与博客文章完全相同。
好的,但是我该如何解决?
另一种可能是仅使用status_progressbar div(无子级)。创建一个足够宽的图像(例如1000px)和您选择的颜色(我个人将创建一个50%的白色不透明度)。
然后:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
然后,我将使用javascript操纵背景位置属性,始终提供px值而不是%,因为%50将使图像居中。
var prcnt = (YOURPERCENTAGE/100)* 366;
在我的特定情况下,这不起作用,因为进度条活动部分的背景实际上是线性渐变,而不是上面示例中的颜色。由于尚无法设置多个背景,因此无法正常工作。抱歉,我没有在原始帖子中对此进行澄清。
????不设置多个背景-只是一个背景色和一个图像。向左移动图像以模仿进度。 (PS现在可以设置多个背景图像(尽管移动会很麻烦,而且这些天也可以在CSS中创建渐变)。
啊,我明白了你的意思。我以这种方式工作,非常感谢。
通过稍微调整CSS可以得到很好的结果。 (演示-在Chrome和FF中测试)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
这只是将灰色div向右微移一个像素。您甚至可以将其提高到2像素,我认为它看起来更好。确保在计算中补偿像素变化。
实际上,Ive自己提出了该解决方案,但它不正确-如果放大并仔细观察,您会发现在边框的顶部和底部边缘仍可以看到父级的一些像素。
您可以尝试在背景元素上将右侧的边框半径向上更改1px。这可能会使它消失在前面后面
不幸的是,它没有,至少不是完全没有。
我认为发生这种情况是因为浏览器尝试对边框进行抗锯齿,并且它可能通过调整透明度来做到这一点,因此您的下div为黑色,顶部为灰色,因此黑色变得低谷。 (不要在此引用我的意思,但这至少对我来说是合乎逻辑的)。
您是否尝试过将status_progressbar和status_progressbar_progress都包装在另一个div中,并将border-radius和overflow:hidden赋予该div?
刚刚尝试过,但没有用。
css重叠边界,关于css:两个重叠元素上的边界半径; 背景闪耀相关推荐
- html鼠标悬停出现新元素,CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素?...
我有一个导航面板,当您将鼠标悬停在灯具 上时,它会显示从主导航面板下拉的面板中的前5个灯具.CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素? 我试图实现这个使用CSS与:hover. 这是:h ...
- CSS教程(一)认识CSS
CSS教程(一)认识CSS Dreamweaver4是现今最好的网站编辑工具之一,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver4在页面中加入CSS,你不 ...
- css边框实现高度,CSS上的边框高度
12 个答案: 答案 0 :(得分:60) 我有另一种可能性.这当然是一种"更新"的技术,但对我的项目来说已经足够了. 只有在需要一个或两个边框时才有效.我从来没有用4个边界做过. ...
- html5如何让多张图片重叠,css怎么让两张图片重叠?
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
- html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕 新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
- 解决图像目标检测两框重叠问题
文章目录 1 问题现象 2 解决办法 3 Non-Maximum Suppression 原理 3.1 什么是非极大值抑制 3.2 为什么要用非极大值抑制 3.3 如何使用非极大值抑制 3.4 效果 ...
- html div左中右布局,求助css。 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
- html设置右边界,CSS边界(margin)——CSS实验室
我们首先来搭建实验margin的平台,一个p元素.点击下面的按钮以将这个p元素"圈出来". 在p的外面还套着一个div,再点击下面的按钮将它圈出来. CSS顶部边界:margin- ...
- 确定一组矩形是否有两个重叠的算法
注:更正一下:在英文原版书中."请给出一个能在O(nlgn)"时间里确定一组矩形中是否有两个重叠的算法. "而不是中文版的 O(lgn).由于这个问题里涉及的排序算法就至 ...
最新文章
- 网络规划设计培训与方案集下载
- AB1601编译优化参数引发的问题
- 【XSY2472】string KMP 期望DP
- HDSF主要节点解说(二)工作原理
- word手写字体以假乱真_常用的100个Word快捷键
- PLSQL Developer中test window的使用
- java关闭文件句柄_java-JAI关闭文件句柄为时过早吗?
- Linux系统盘爆满根目录100%,又找不到占空间的大文件 原因与解决方法
- T-SQL之条件链接
- 安装VMware时,出现 安装程序无法继续 Microsoft Runtime DLL 安装程序未能完成安装 您无权输入许可证密钥,请使用系统管理员账户重试 VMware15.5.x 安装问题处理
- matlab求动力学模型,MATLAB/Simulink动力学系统建模与仿真(带目录)_IT教程网
- VXLAN 技术解析-(1)VXLAN简述
- 解决 Permission denied: user=root, access=WRITE, inode=“/user“:hdfs:supergroup:drwxr-xr-x
- HUAWEI 机试题:VLAN资源池
- 一个初中生到程序员的辛酸经历(转载)
- ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
- IEEEAccess参考文献整理
- 2020面试要点大全
- 手把手教你接入微信开放平台,实现网站拉起微信账号登录,从0开始详细记录
- 这是广告clearview ai用来将您的脸卖给警察的广告