html - 如何布局跨越两个不同背景图像的图像的方法

标签 html css

寻找一些关于如何在 html/css 中实现以下设计的提示和技巧:

enter image description here

蜡烛是图像。绿色背景是包含其他元素的 div 的平铺背景,而粉红色背景是整个页面的背景。

如何放置蜡烛图像,使其大部分位于带有绿色 bg 的 div 内,然后火焰的小突出部分的 bg 为粉红色图案?请注意,粉红色图案是整个页面的背景。

绿色图像

最佳答案

我会将蜡烛制作成透明的 PNG 文件,这样我就不必费心构建蜡烛图像,使背景图像的条纹和点正确对齐。

如果您使用 alpha 透明度,这可能会在 IE6 中产生问题,但有解决方法。

然后我将蜡烛放在带有 float: leftposition: absolute 的容器中(取决于布局的其余部分),位于左侧绿色区域的一侧。

图像本身将获得 position: relative; top:-50px(相应地调整)以向上移动到内容容器之外。

关于html - 如何布局跨越两个不同背景图像的图像的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6088986/

相关文章:

jquery - 左侧偏移到右侧

css - 如何在图像上显示 "next"、 "previous"按钮(鼠标悬停时)?

jquery - 弹出菜单和 Bootstrap(它没有以正确的宽度出现)

javascript - 在具有动态添加类的元素上单击无法识别

html - 如何将正文电子邮件中的变量设置为运行一次?

javascript - 更改 <input> 字段的显示

php - 联系表单脚本未运行,白页

html - CSS 图像悬停会插入页面中的其他元素吗?

html - 图像交换仅使用 CSS 并且在交换后在图像上有链接

javascript - 如何防止选择被更改?