如何为图像添加图层？
正如你在下面的代码片段中看到的，我很难让蓝色覆盖贴在图像上，但是正如你所看到的，在左侧，由于某种原因，它没有贴在图片上。是的，我希望一整列的位置比另一列低/高一点，所以这里我尝试将整列1定位70px，但它撕裂了蓝色覆盖层和图像。有什么想法吗？
null
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display:flex;
}
img{
width:300px;
height:200px;
}
.container{
margin: auto;
width: 50%;
}
.column1{
margin-top: 70px;
margin-right: 15%;
position:relative;
}
.column2{
margin-top: 120px;
position:relative;
}
.text h1{
width:300px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 2.5rem;
font-weight:100;
}
.column2 .cover{
position:absolute;
bottom: 0px;
font-family: muli, sans-serif;
font-weight:1000;
width: 100%;
background-color: #00B5FD;
}
.column1 .cover{
position:absolute;
bottom: 0px;
font-family: muli, sans-serif;
font-weight:1000;
width: 100%;
background-color: #00B5FD;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img src="Fluids.jpg" alt=""></img>
<div class="cover">Fluids</div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img src="medical.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="SurgicalTools.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img src="DrugDevice.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="Packaging.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img src="HomeCare.jpg" alt="">
<div class="cover">Fluids</div>
</div>
<div class="column2">
<img src="Labware.jpg" alt="">
<div class="cover">Fluids</div>
</div>
</div>
</div>
</body>
</html>null
共有1个答案
这是因为每一行都显示为FlexBox。
右边的列比右边的列有更大的顶部边距，这导致flexbox增长到比图像和蓝色标签的高度更高。
因为蓝色标签绝对位于容器的底部，这会导致它们分裂。
如果从蓝色标记中删除bottom:0；并将img更改为display:block；（删除两个元素之间的间隙），则会使其表现得更好。
编辑：实际上我在这里找到了另一个解决问题的方法：防止flex项目的高度扩展以匹配其他flex项目
如果您将高度：0%；添加到flexbox内容(.column1)中，那么它将使其神奇地工作，不做其他更改，保持位置：绝对；和底部：0；。
-
你可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入模型中以进行设计或标识模型。若要添加一个新的图像，点击工具栏的 “图像”按钮，并点击画布的任意位置。然后，在打开对话框中选择图像。 在画布中图像对象的弹出式菜单选项包括： 选项 描述 重设大小 重新设置图像的大小为它的原始大小。 重设高宽比率 保持图像的原始宽度与高度的比率。 剪切 从图表移除图像并放它在剪贴板。 复制 从图表复制图像到
-
你可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入模型中以进行设计或标识模型。若要添加一个新的图像，点击工具栏的 “图像”按钮，并点击画布的任意位置。然后，在打开对话框中选择图像。 在画布中图像对象的弹出式菜单选项包括： 选项 描述 重设大小 重新设置图像的大小为它的原始大小。 重设高宽比率 保持图像的原始宽度与高度的比率。 剪切 从图表移除图像并放它在剪贴板。 复制 从图表复制图像到
-
您可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入仪表板以进行设计或标识仪表板。 添加一个图像 在仪表板选项卡中，点击 “添加图像”。 在打开对话框中选择图像。 属性 图像的可用属性： 选项 描述 不透明度 设置图像的不透明度。 位置 自定义图像的位置。 大小 自定义图像的大小。 原始大小 将图像重置为其原始大小。 URL 输入 URL 路径以将图像设置为超链接。
-
你可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入模型中以进行设计或标识模型。若要添加一个新的图像，点击工具栏的 按钮，并点击画布的任意位置。然后，在打开对话框中选择图像。 在画布中图像对象的弹出式菜单选项包括： 选项 描述 重置大小 重新设置图像的大小为它的原始大小。 重置高宽比率 保持图像的原始宽度与高度的比率。 剪切 从图表移除图像并放它在剪贴板。 复制 从图表复制图像到剪贴板。
-
您可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入仪表板以进行设计或标识仪表板。 添加一个图像 在仪表板选项卡中，点击 。 在打开对话框中选择图像。 属性 图像的可用属性： 选项 描述 不透明度 设置图像的不透明度。 位置 自定义图像的位置。 大小 自定义图像的大小。 原始大小 将图像重置为其原始大小。 URL 输入 URL 路径以将图像设置为超链接。
-
你可以将图像（BMP、JPG、JPEG 或 PNG 文件）插入模型中以进行设计或标识模型。若要添加一个新的图像，点击工具栏的 按钮，并点击画布的任意位置。然后，在打开对话框中选择图像。 在画布中图像对象的弹出式菜单选项包括： 选项 描述 重置大小 重新设置图像的大小为它的原始大小。 重置高宽比率 保持图像的原始宽度与高度的比率。 剪切 从图表移除图像并放它在剪贴板。 复制 从图表复制图像到剪贴板。