- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用另一张图片在 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
值将图像移动到一边:
#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/
考虑具有 V 个顶点和 E 个边的图 G(V,E)。我们想用恰好 K 种颜色给顶点图着色。 着色图是指以两个相邻顶点不应该具有相同颜色的方式为每个节点分配颜色。 我们如何实现这个问题? 最佳答案 首先
我遇到的问题可以简化为: Given an array of N positive numbers, find the non-contiguous sequence of exactly K ele
根据这些问题 Subset sum problem和 Sum-subset with a fixed subset size我想知道解决子集和问题的一般算法是什么,我们被迫使用恰好 k 个整数,k <
我想从具有模式的行中取出数字,但它不会按照我的意愿对数字进行分组。 public static void main(String[] args) { Pattern pattern = Pat
我试图弄清楚用于查找与一组字符恰好 N 次出现(不多于少)匹配的正则表达式。这看起来是一项非常简单的任务,但我一直无法为其找到合适的正则表达式。 更具体地说,我想要一个正则表达式来判断给定字符串是否恰
我试过同时使用 httpx 和 aiohttp,并且都有这个硬编码限制。 import asyncio import aiohttp import httpx async def main():
我有一个在 Amazon EC2 云中运行的服务器应用程序。从我的客户端(浏览器)我发出一个 HTTP 请求,该请求将文件上传到服务器,然后服务器处理该文件。如果有很多处理(大文件),服务器总是在 1
我在 PHP 中使用带有 preg_match 函数的 perl 风格的正则表达式。我想验证一个恰好 10 个字符的 key ,包含大写字母字符或数字。 我有 preg_match( '/[^A-Z0
我正试图找到正确的 python 正则表达式来解决这个问题: 给定一个由字符 ?、_ 和 o 组成的字符串,找到长度为 n 的子字符串> 仅包含 ? 和 o 以及至少一个 o。 这是我想出来的,但它似
图中每条边的权重为 1,图中可能有环,如果一个节点有自环,它可以是从 0 到无穷大的任何距离,具体取决于编号。时间我们采取 self 循环。 我已经用bfs解决了这个问题,但是对距离的约束是10^9的
我有一个居中的 DIV,正好(不多也少)900px。我希望它始终居中,并让两个填充 div 填充每一侧页面的其余部分... 给下面的内容(使用 z-index)一个突出显示的类型效果...(这是填充
我的 Xcode 版本是 10.2。当我将应用程序上传到 iTunes Connect 时,显示以下错误: Missing required icon file. The bundle does no
我是一名优秀的程序员,十分优秀!