wangxu7777 2020-06-03 15:18 采纳率: 0%
浏览 99

如图：请教大佬CSS如何实现让那个光标一直在图片的那个红框位置无论多大的分辨率都不会变，并且图片要占满 全屏？

图在这：图片说明

  • 写回答

1条回答 默认 最新

  • Print_v 2020-06-04 10:57
    关注

    需要用到百分比单位，可以通过调整 .point的left,bottom的值来调整位置，分辨率改变都不会影响位置。至于大小的话，可能会有点偏差（跟上图的红框部分大小不一样），但是应该不影响大体内容。
    如果要光标改变大小，则需要调整.point的left,bottom,margin-left,margin-bottom的值,(margin-left,margin-bottom 的值是宽高的一半，比如：光标高度50，则这两个值为25)
    代码如下：

    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>test</title>
        <style>
            .wrap{
                position: relative;
            }
            .point{
                position: absolute;
                bottom: 13.2%;
                left: 18.9%;
                width: 170px;
                height: 170px;
                background-color: red;
                margin-left: -25px;
                margin-bottom: -25px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://img-ask.csdn.net/upload/202006/03/1591168685_86145.jpg" width="100%" height="100%" alt="">
            <div class="point">点</div>
        </div>
    </body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题