前端之家收集整理的这篇文章主要介绍了
html – 带装饰的CSS，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我一直在努力学习一些理论上应该非常简单的事情……而且我决心不放弃.
我想要实现这个目标：
基本上水平的规则,在它之间有一个装饰 – 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元素具有水平重复的合适背景图像.背景图像将是与整个页面背景颜色相同但在中间具有水平线的片段.
原文链接：https://www.f2er.com/html/226791.html
