html – 带装饰的CSS
发布时间:2020-12-14 16:45:36 所属栏目:资源 来源:网络整理
导读:我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃. 我想要实现这个目标: 基本上水平的规则,在它之间有一个装饰 – HR将跨越屏幕的整个宽度. 所以我切片我的PSD将装饰作为图像丢弃 – 我试图将其叠加到一个居中但却失败的悲惨. 我的标记:
我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃.
我想要实现这个目标: 基本上水平的规则,在它之间有一个装饰 – HR将跨越屏幕的整个宽度. 所以我切片我的PSD将装饰作为图像丢弃 – 我试图将其叠加到一个居中但却失败的悲惨. 我的标记: <div> <hr> <img src='assets/img/ornament.png' class='center'> </div> CSS: hr{ height: 2px; color: #578daf; background-color: #578daf; border:0; } 我只是想弄清楚如何使图像出现在HR的中心….任何帮助或指针将不胜感激. 解决方法
更改标记tp
<div class='hr'> <hr> <img src='assets/img/ornament.png' alt=''> </div> 将以下内容添加到样式表中,将16px替换为适当的值,该值取决于图像的高度和预期的字体大小. .hr { text-align: center; } .hr img { position: relative; top: -16px; } 然而,更好的方法是仅使用图像,以div元素为中心,div元素具有水平重复的合适背景图像.背景图像将是与整个页面背景颜色相同但在中间具有水平线的片段. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |