gpt4 book ai didi

css - 在 CSS 和 HTML 中将图像放置在彼此之上

转载 作者:太空宇宙 更新时间:2023-11-04 05:12:08 25 4
gpt4 key购买 nike

我一直在努力解决这个问题。基本上我有一个有背景的网站。在这个背景之上,我有一个居中的图像,我们称之为 image1。正好在 image1 之上,我想绘制 image2。所以基本上我有一个背景,我想在上面绘制两个居中的图像。我称它们为 centeredImage 和 overlayImage。

感谢您的帮助!最好的问候,卢卡斯

到目前为止,这是我的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media=screen>

body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
height:1515;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.overlayImage1
{
position:absolute;
left:0px;
top: 0px;
z-index: 1;
}
.overlayImage2
{
position:absolute;
left:0px;
top: 0px;
z-index: 2;
}

</style>

<title>A dream within a dream</title>
</head>
<body>


<!-- PAGE BEGINS -->
<div class= "containerPage">

<!-- BACKGROUND IMAGE -->
<img class="overlayImage1" src="column.gif" unselectable="on" height="1515" width="1024"/>
<img class="overlayImage2" src="webSite_split_page1.gif" height="1515" width="1024"/>
<!-- CONTENT BEGINS -->
<!-- LEFT SIDE -->

</div>

</body>
</html>

最佳答案

我明白你现在想要什么了。尝试这个。您需要调整 top 值以获得正确的垂直对齐方式。

http://jsfiddle.net/frV3D/

body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
margin-top:50px;
margin-left:auto;
margin-right:auto;

}

.centeredImage { display: block; margin: 0 auto; }

.overlayImage {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px; /* Half the height */
margin-left: -150px; /* Half the width */
}

关于css - 在 CSS 和 HTML 中将图像放置在彼此之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9051213/

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