html - 如何在不使用绝对定位的情况下将图像放在图像之上?

标签 html css

基本上,我有一些很好的导航按钮 .png 是 friend 给我的,还有一个 header/banner.jpg。我想将这些 .png 放在 .jpg 横幅上。问题是我正在使用 css 翻转功能(用于导航按钮),要求 我对包含各个导航按钮的 div 使用 position: relative。否则翻转功能在 Opera 中会变得很麻烦。我怎样才能做到这一点?

这是一些 CSS 代码(用于导航按钮):

.cssnavabout    { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a   { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }

和 HTML 分区(用于导航按钮):

<div id="csswrapper">
 <div class="cssnavabout">
<a href="about.html"><img src="navigation/about_on.png" width=100 height=50 /></a>
</div>

这是页眉/横幅的 CSS:

#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }

横幅的 HTML:

<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>

我相信这很容易解决。抱歉,这是我的第一个网站。

最佳答案

How do I put an image on top of an image without using absolute positioning?

像这样...

<div style="background: url(image.png) no-repeat">
    <img src="image2.png" alt="" />
</div>

关于html - 如何在不使用绝对定位的情况下将图像放在图像之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4643337/

相关文章:

javascript - 更改日期范围选择器中的月份位置

html - 制作登录/注册表单的最正确/简单/使用/最干净的方法(Divs/其他)

css - 宽度为 100% 的 svg 图像并不总是 100% 宽

html - 动画边框底部长度从 0 到 100

html - 将页脚分隔为三列

html - 较大的字体大小在右对齐文本中向右移动

jquery - css 媒体查询不适用于动画后带有 jQ​​uery 的对象

html - 如何在 span 元素为空时不显示 css padding

css - 不同颜色的双边框

css - Bootstrap 4.1 垂直导航如何使用 mr-auto/ml-auto 徽章