作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 Web 应用程序,在该应用程序中,用户通过在表单中输入数据来创建复杂的情况说明书。在其 <div class="preview">
中包含对最终情况说明书的预览。 .我想用一些东西覆盖这个预览,也许是一个透明的对 Angular 线灰色文本,上面写着“预览”。基本上,我想以平铺背景之类的东西结束,但显示在元素的前面而不是元素的后面。
我在 Internet 上找到了几种叠加的解决方案,但它们假定我在标记中定义了两个单独的元素,并且想将一个元素放在另一个之上。但我直觉上感觉“更干净”,不必在页面标记中定义叠加层。所以我更喜欢纯粹在 CSS 中完成的解决方案。
叠加层的内容将是一个非常简单的图像,或者可能是由 1-2 个单词组成的转换文本,或者可能只是一种透明颜色(我还没有决定)。如果需要,它将是可以在 css 伪类中轻松定义和维护的东西。
我是做响应式设计的,所以不能用绝对定位,也不知道要叠加的区域大小。
最佳答案
使用伪元素、绝对定位和 CSS3 背景大小调整:
.preview {
position:relative;
}
.preview:after {
content:'';
background:url(https://mpmath.googlecode.com/svn/trunk/doc/build/_static/preview.png) 50% / contain no-repeat;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
关于css - 如何在不在 HTML 中定义的情况下在 div 上创建覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27706418/
我是一名优秀的程序员,十分优秀!