求教一个css问题,万能的虎友。

@Ta 2021-06-07 16764点击
怎么去除img图片边缘空隙问题Screenshot_20210607-020223.png
回复列表(21|隐藏机器人聊天)
  • @Ta / 2021-06-07 / /

    代码不贴一下,这是让猜喽
    人生若只如初见

  • @Ta / 2021-06-07 / /
    margin 设置为负数,或者父元素padding 设置为0
  • @Ta / 2021-06-07 / /
    img {
      margin: 0;
      padding: 0;
    }
    

    至于图片本身有边框,而且不同的图片边框不一样大,那就不是css能解决的了,应该P图,画布>剪裁到内容。

  • @Ta / 2021-06-07 / /
    @枫叶飘@老虎会游泳,目前只能用position:fixed;left:0;top:0解决这个问题,但是不能滚动。。。@文森
  • @Ta / 2021-06-07 / /
    position:fixed这个是浮动属性,加这玩意干嘛,看看图片的嵌套div和图片本身img,有没有pading属性和margin属性值,有的话就改成0,没有就再上一级div查找,找到并改成0
  • @Ta / 2021-06-07 / /

    用剪刀,剪一下试试ᥬ

    本消息来自粉金版 爱欧博客

  • @Ta / 2021-06-07 / /

    @我没K,给个demo我们看看。

  • @Ta / 2021-06-07 / /

    @我没K, 不展示代码很难知道你的布局是什么样子的。

  • @Ta / 2021-06-07 / /
    @枫叶飘@文森@老虎会游泳@老虎会游泳

    //主要是#box怎么改?  ↓

    #box {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #fff;
            position:fixed;
            top:0px;
            left:0px;
        }
    /*背景图片宽度高度设置*/
        #img, .ioc-main-box {
            width: 100%;
            height:auto;
          
        }

        .ioc-main-box {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 10;
        }

        .ioc-list {
            width: 100%;
        }

        .ioc {
            cursor: pointer;
            width: 17.6%;
            margin: 0 1%;
            object-fit: cover;
        }

        .set-box {
            position:fixed;
            top: 300px;
            left: 20%;
        }
    /*贴图图片宽度*/
        .set-img {
            user-select: none;
            width: 50%;
           min-width:500px;
           max-width:200px;
            top: 0;
            left: 0;
        }

        .set-close {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 35px;
            cursor: pointer;
            box-shadow:0px 0px 8px red;
            border-radius:50px;
            left:115%;
            top:-3px;
        }


  • @Ta / 2021-06-07 / /

    @我没K,请再展示你的html,否则我们还是不知道布局是什么样子

  • @Ta / 2021-06-07 / /

    可以的话直接发在线演示,这样大家都能调试
    html和css代码缺一不可,不然真就只能猜了
    人生若只如初见

  • @Ta / 2021-06-08 / /

    img出现的幽灵缝隙一般是代码换行被识别为空格。直接给图片父容器加上 font-size:0 应该就没有缝隙了
    小米MIX2s(白)

  • @Ta / 2021-06-08 / /
    @老虎会游泳,我还没开发完,现在先测试JS,后面修改了才知道
  • @Ta / 2021-06-08 / /

    @水木易安,很可能是

  • @Ta / 2021-06-08 / /
    小米MIX2s(白)
  • @Ta / 2021-06-08 / /
    @水木易安@老虎会游泳@水木易安@枫叶飘,目前代码还在完善,需要修改的太多,这个是PS拼图图片开发Screenshot_20210608-012506.png
  • @Ta / 2021-06-08 / /

    你先慢慢写
    小米MIX2s(白)

  • @Ta / 2021-06-08 / /
    @文森@枫叶飘@老虎会游泳@水木易安,有一点不明白的是怎么合成这些东西拼凑裁剪成一张图片?是用到画布么?
  • @Ta / 2021-06-08 / /

    @我没K,可以使用 canvas

    或者直接简单的来个 html2canvas
    小米MIX2s(白)

添加新回复
回复需要登录