带有背景图片的 CSS 假 HR

标签 css

我想要一个类似 HR 的背景图片。一个 2 像素宽的 gif 文件。
我研究了 HR 标签的样式,但浏览器问题太多..

使用了一个2px高的div,图像作为背景,但是在IE6中,有一个我似乎无法摆脱的填充。
欢迎提出任何建议!

CSS:

.hr {
    margin: 0; padding: 0;
    height: 2px;
    background-image: url('images/help-hr.gif');
    background-repeat: repeat-x;
    background-color: green; /* just to see the padding in IE6 */
}

HTML:

<p>sky</p>
<div class="hr"></div>
<p>grass</p>

最佳答案

添加溢出:隐藏;

.hr {
    margin: 0; padding: 0;    
    height: 2px;    
    background-image: url('images/help-hr.gif');
    background-repeat: repeat-x;
    background-color: green; /* just to see the padding in IE6 */

    overflow:hidden;
}

关于带有背景图片的 CSS 假 HR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3850346/

相关文章:

html - 我在尝试使用 CSS 垂直对齐 div 时遇到问题

javascript - 在不改变鼠标位置的情况下从 JS 执行 mouseover()

javascript - 如何使用 JQuery 滚动到 ng-repeat Angular JS 生成的 div 的底部?

javascript - 垂直滚动行可以同时包含普通元素和水平滚动元素吗?

jquery - 使水井漂浮在 body 上而不是将元素插入 body

javascript - 为什么JavaScript引起的CSS样式变化在脚本运行结束后不会保留?

html - 为什么我的各种 HTML 表格都有不同的宽度?

javascript - jQuery - 选中复选框时为表格行着色,未选中时删除

css - 边距 : auto not working vertically?

css - 在构建 VITE 应用程序时如何分配自定义 CSS 文件名?