html – css“background-image”显示不需要的边框,img“src”没
发布时间:2020-12-14 18:36:40 所属栏目:资源 来源:网络整理
导读:开始使用Twitter Bootstrap,我遇到了一个奇怪的问题,我无法弄清楚原因. 当我使用以下方式渲染图像时: img class="img-rounded" id="logo" / 在CSS中: #logo { background-image: url(/Content/Images/logo.png);} 图像显示为窄边框: 即使我找不到与此效果
开始使用Twitter Bootstrap,我遇到了一个奇怪的问题,我无法弄清楚原因.
当我使用以下方式渲染图像时: <img class="img-rounded" id="logo" /> 在CSS中: #logo { background-image: url(/Content/Images/logo.png); } 图像显示为窄边框: 即使我找不到与此效果有关的任何东西.角落是开放的,因为img-round类. 使用以下方法渲染图像: <img class="img-rounded" id="logo" src="~/Content/Images/SO.png" /> 按预期渲染: 我该怎样摆脱边界? > border:none; 解决方法
这应该工作.我认为问题是使用没有src属性的img标签.在这种情况下,我们可以简单地使用div标签.
我早些时候在SO上遇到过这个问题,但我不记得那个问题的链接了. 1)使你的身高和宽度为0. 2)根据图像大小给出适当的填充. (即填充:宽度/ 2px高度/ 2px宽度/ 2px高度/ 2px) 简而言之,左右填充应该加到图像的宽度 img { background: url(http://i.stack.imgur.com/8C4wK.png) no-repeat; font-size:0; width:0px; height:0px; padding:36px 99px 36px 99px; /* Since height and width are 0. use appropriate padding. Image is of 197 X 73 dimension. So using 36px on left and right whereas 99px each on top and bottom*/ border-style:none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <img /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |