qq_15467669 05月18日
把一张图片抠出里面的两个元素,然后还能和背景在任何屏幕下保持完全重叠,有什么办法吗?
这是一张背景图,我想把圈起来的两个地方抠出来,然后背景图做成宽度100%,高度自动适应,auto。然后我抠出来的这两张图,用<img src>显示在页面上,然后去和这个背景图完全重叠。要考虑到各种屏幕,各种分辨率,就是屏幕随意改变,然后看起来还是一张图。




我把第一张图命名为a1.png 第二张图命名为a2.png 第三张图命名为bg.png

.test{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: url("bg.png") no-repeat #ddf7ff;
background-size: 100% auto;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;

align-items: center;*/
}
.a1 {position:absolute;top: 10.3%;left: 53.4%;}
.a2{position:absolute;top:10.1%;left: 47.57%;}


然后html代码如下

<div class="test">
<div class="a1"><a id="a1"><img src="a1.png" /></a></div>
<div class="a2"><a id="a2"><img src="a2.png" /></a></div>
</div>



这样子,做的时候,在某个分辨率下面,是可以完全重叠的,但是我浏览器缩放有,位置就改变了,我怎么才能实现,浏览器任意缩放,a1,a2这两张图,刚好在抠出来的位置,完全重叠,看起来还是一张完整的图。
...全文
120 点赞 收藏 3
写回复
3 条回复

还没有回复,快来抢沙发~

发动态
发帖子
CSS
创建于2007-09-28

3.1w+

社区成员

6.0w+

社区内容

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区公告
暂无公告