gpt4 book ai didi

javascript - 我可以使用 CSS 将图像的一半恰好与另一个图像重叠吗?

转载 作者:行者123 更新时间:2023-11-30 12:37:33 49 4
gpt4 key购买 nike

我正在尝试使用另一张图片在 CSS 中恰好重叠一半图片。事情是我想要说图像的高度(x = 200px)。图像的宽度会根据图像的宽高比而谨慎。我是否仍可以编写 CSS,将调整大小后的图像的一半恰好与另一幅图像重叠。

以下是一段代码,我在其中调整了重叠图像的位置。我可以让 CSS 以某种方式为我做这件事吗?或者有什么js可以帮忙吗?在下面的代码中,我希望高度不变,但是所用图像的一半应该横向重叠。

<html>
<head>
<style type="text/css">

#collage-container{
width:300px;
height: 200px;
position: relative;
background:#f22;
}

#collage-one, #collage-two{
height:200px;
position:absolute;
}

#collage-one{
z-index:1;
left:100px;
position:absolute;
}
</style>
</head>
<body>
<div id=collage-container>
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
</div>
</body>
</html>

最佳答案

由于图像的宽度是不同的,你可以使用CSS transform translate()带有 percentage value 的表达式根据图像的 width 值将图像移动到一边:

EXAMPLE HERE

#collage-container {
height: 200px;
position: relative;
}

#collage-container img {
height: 100%; /* As tall as the container */
width: auto;
float: left;
}

#collage-container img + img { /* Move the second image 50% of its width */
transform: translateX(-50%); /* to the left */
}

值得注意的是 IE9+ 支持 CSS 转换

关于javascript - 我可以使用 CSS 将图像的一半恰好与另一个图像重叠吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25603822/

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