zoukankan      html  css  js  c++  java
  • img 灰色默认外边框的去除

    最近在做一个小游戏时发现了一个问题,总是在弹出img时先出现一个灰色的边框,所以为了查找问题,查找了一些关于img 默认边框的小知识点。

    在这里整理了一些知识点:

    一. 下面代码都试验过后会发现,img会有外边框,这个也是使用img元素的一个坑

         一般在img为空时出现,因为浏览器找不到图,就会用一个边框来代替

    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="UTF-8">
            <title>img外边框</title>
        </head>
     
        <body>
            <p class="container-img">
                <img class="common-icon login-icon" src="">
            </p>
     
        </body>
        <style type="text/css">
            .container-img {
                display: inline-block;
                width: 36px;
                height: 36px;
                overflow: hidden;
            }
            .common-icon {
                display: inline-block;
                width: 36px;
                height: 36px;
            }
            
        </style>

    为了解决这个问题,整理了几个方法:

    1. 设置空img的css样式

    img[src=""],img:not([src]){
                opacity:0;
            }

    第一个为属性选择器(img中src为空的元素),第二个为反选伪类选择器(src没有的img元素),将其的opacity设置为空

    2.img剪裁方法

    (1)负margin

     .container-img img {
                 display: inline-block;
                 margin: -1px;
                 width: 38px;
                 height: 38px;
             }

    负的边距像能减小元素在文档流中的尺寸一样,但其实它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,所以位置也就发生变化了。还有,文档流只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动。所以margin = -1px相当于向左上方移动一个像素,所以margin = -1px相当于向左上方移动一个像素,为了让父级元素可以遮住img的边框,需要将img width/height 均加2px,相当与对图片进行剪裁,定位元素方法与这个原理一样。

    负margin的使用场景很多,我们很多用的三栏布局的圣杯布局,双飞翼布局都是这么使用的。

    (2)绝对定位

    .container-img{
                position:relative;
           }
    .container-img img {
                position: absolute;
                top: -1px;
                right: -1px;
                width: 38px;
                height: 38px;
            }

    ------------------- 

    作者:chancejl
    来源:CSDN
    原文:https://blog.csdn.net/qq_39833794/article/details/79922355
    版权声明:本文为博主文章,转载请附上博文链接!

  • 相关阅读:
    小结一下在函数使用的时候加括号和不加括号的区别
    总结一下
    JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
    HP DL388 gen9服务器安装RHEL 6.5系统
    第一次经历黑客攻击服务器系统
    小红帽5.9 配置静态IP上网问题
    redhat linux enterprise 5 输入ifconfig无效的解决方法
    关于将一台电脑分割成2个独立运行个体的测试...(1)
    Ubuntu 小白安装血泪史
    RHL 6.0学习日记, 先记下来,以后整理。
  • 原文地址:https://www.cnblogs.com/lguow/p/10521277.html
Copyright © 2011-2022 走看看