gpt4 book ai didi

layout - 实现具有多个背景的单列 CSS 布局的最优雅方式

转载 作者:太空宇宙 更新时间:2023-11-03 19:11:27 26 4
gpt4 key购买 nike

使用 CSS2.1/CSS3 实现以下单列布局的最简单优雅的方法是什么,以便在 Firefox/Chrome/Opera 中看起来完全相同?

我有一个由 3 个图像(header.png、重复的 middle.png 和 footer.png)和一段红色文本(可变高度)组成的黄色背景。我希望文本部分覆盖页眉和页脚图像(如下图所示)。黄色框外的背景应该是透明的。

example

一种解决方案是使用具有多个背景和填充的大字体:

<div style="background: url(header.png) no-repeat center top, url(footer.png) no-repeat center bottom; padding: 50px;">
<p>A lot of text...</p>
</div>

但是中间的背景呢?如果我使用 repeat-y 将它添加到多个背景,它将在 header.png 和 footer.png 的透明部分下可见。

有什么想法吗?提前致谢!

最佳答案

我会使用伪元素! IMO 是实现此类功能的最优雅方式——并且也得到了很好的支持

我做了一个快速的 jsfiddle 概述了我的解决方案:

http://jsfiddle.net/vfdFR/6/

您的图像没有显示,但它应该运行良好——将重复背景应用到 div 元素,将页眉和页脚图像分别应用到 div:before 和 div:after 并加上一些 z-index 一切都应该看对了

希望对你有帮助

关于layout - 实现具有多个背景的单列 CSS 布局的最优雅方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8158832/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com