我正在尝试学习如何使用:before和:after伪元素.我正在尝试将黑色背景添加到页面底部作为粘性页脚,但它似乎无法正常工作.
基本上我有一个重复的图像作为HTML元素的背景,然后我添加一个绝对div位于底部与纯黑色背景.
我只是想指出这是一个学习实验而不是我如何实现相同的效果,但我正在尝试的是在Firefox中工作但不在Chrome中工作!
这是我的CSS:
html { background-image: url('images/template/html-bg.jpg'); background-position: top left; background-repeat: repeat-x; background-color: #0e0e0e; height: 100%; position: relative; } html:before { content: ""; display: block; background-color: #000; width: 100%; height: 138px; bottom: 0px; position: absolute; }
解决方法
您的CSS应该按预期工作,因为您的伪元素应该在
initial containing block(视口,由html元素表示)的上下文中绘制,这正是Firefox正在做的事情.
您的特定问题报告为Chrome bug,但尚未得到解决.作为一种变通方法,您可以将伪元素应用于body:
body:before { content: ""; display: block; background-color: #000; width: 100%; height: 138px; bottom: 0px; position: absolute; }
根据您的布局,您可能需要保留html规则或将其更改为正文.
原文地址:https://www.jb51.cc/css/215120.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。