我有两张照片。一个是具有圆形边缘的图片,另一个是圆形框架的图片。我想将框架放在图片上,使其看起来像是单个图像。 我正在努力与CSS做这件事,因为在不同的屏幕尺寸上,它不会保持不变。
这是我的HTML:
<div class="image">
<img src="picture.png" id="profile"/>
<img src="frame.png" id="frame"/>
</div>
我的CSS:
div.image {position: relative;}
img#profile {width: 250px;
border-radius: 50%}
img#frame {width: 250px;
position: absolute;
z-index: 100;}
我希望结果看起来像这样(蓝色是图片#profile
,橙色是图片#frame
:
此外,无论屏幕大小如何,都需要保持这种状态,因此使用left
值并不起作用。
使用上述标记,图像正在执行此操作:
我该如何解决这个问题?
答案 0 :(得分:1)
你没有提供任何照片。所以,我使用了CSS样式。您可以删除背景颜色并添加图片网址。
using (var originalEnumerator = originalShapesListID.GetEnumerator())
foreach (var editShape in editedShapesListID)
{
if (!originalEnumerator.MoveNext()) break;
var original = originalEnumerator.Current;
...
}
<强> JSFIDDLE
答案 1 :(得分:0)
每当你改变大小时,你都需要自己修复它。
div.image {
position: fixed;
margin: 100px;
}
img#profile {
width: 250px;
height: 250px;
background: skyblue;
border-radius: 100%;
z-index: 100;
position: absolute;
}
img#frame {
width: 270px;
height: 270px;
background: orange;
border-radius: 100%;
z-index: -1;
position: absolute;
top:-10px;
left:-10px;
}