Question

我正在为网站做一个Userstyle，所以我只能更改CSS。

他们生成的图片在顶部和底部都有一个白色边框，我想摆脱它。

HTML结构如下所示：

Invoke-Command -Computer $Machines -ScriptBlock {
    Get-Service -Name $using:Services -ErrorAction SilentlyContinue |
        Restart-Service
}

跨度是一个有点彩色的文本字段，它与img重叠，所以把溢出：隐藏在不工作上。（因为它也将裁剪跨度）

我也试过使用边框，但这并没有让我到处都是。

还有其他办法吗？

编辑：这是我问题的codepen

Answer 1

trautmann，看看这里： https://jsfiddle.net/0qc27otz/

.wrapper {
    background-color: grey;
  padding-bottom: 4em;
  padding-left: 4em;
  padding-top: 4em;
    width: 100%;
    float: left;
}


     div.wrapper a{
        border: none;
        display: block;
        position: relative;
        float: left;
        width: auto;
        height: 165px;
        overflow: hidden;
      }

      div.wrapper a img{
        display: block;
        position: relative;
        width: 100%;
        margin-top: -5px;

      }
    .myspan {
    display: block;
    position: absolute;
    bottom: 20px;
      left: 5%;
      width: 10%;
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    height: 16px;
    background: red;
    }

是你需要的吗？

Answer 2

正如量子笔在评论中所说，你可以像这样使用剪辑路径：

＆＃13;

img {
  -webkit-clip-path: inset(10px);
  clip-path: inset(10px);
}

＆＃13;

<img src="http://placehold.it/300x125">

＆＃13;

诚实的浏览器支持是quite bad。这是fun tool与该物业一起玩。

Answer 3

我建议你看看这里： http://cssdeck.com/labs/full/1z7osafa

我将类添加到img，a并将所有内容包装到div。

所以主要的想法是制作一个确定高度的块并隐藏过流，你也可以设置任何边界。

希望代码会显示给您，您将理解它。如果不是，这里是html：

    <div class='SomeWrapper'>
    <a class='TheLinker' href='http://sdelanounas.ru/'>
      <img class='TheIMG' src='http://sdelanounas.ru/i/c/2/r/f_c2RlbGFub3VuYXMucnUvdXBsb2Fkcy82LzkvNjk1MTM4NjU3MDk5NF9vcmlnLmpwZWc_X19pZD00NDYwMg==.jpeg'/>
      <span class='sometext'>This Is a Great Plane</span>
    </a>
    <a class='TheLinker' href='topwar.ru/'>
      <img class='TheIMG' src='http://cdn.topwar.ru/uploads/posts/2014-03/1395891634_2249x1444_su-34-frontovoj-zaschitnik-fullback.jpg'/>
  <span class='sometext'>This Is a Great Plane</span>
    </a>    
    </div>

这是CSS：

div.SomeWrapper{
  width: 100%;
  display: block;
  position: relative;
  float: left;
}
div.SomeWrapper{
  width: 100%;
  display: block;
  position: relative;
  float: left;
}
a.TheLinker{
  display: block;
  position: relative;
  float: left;
  width: 48%;
  margin: 0 1%;
  height: 18em;
  overflow: hidden;

}
a.TheLinker img{
  width: 100%;  
  border: none;
}

span.sometext{
  display: block;
  position: absolute;
  bottom: 1em;
  background: rgba(255,255,255, 0.8);
  color: #555;
  text-shadow: #ccc;
  width: 100%;
  text-align: center;

}
a.TheLinker img{
  width: 100%;  
  border: none;
}

span.sometext{
  display: block;
  position: absolute;
  bottom: 1em;
  background: rgba(255,255,255, 0.8);
  color: #555;
  text-shadow: #ccc;
  width: 100%;
  text-align: center;

}

我是这里的新手，所以我的代码可能没有正确形成，所以如果有什么东西不好看，那就很抱歉.. 如果您有疑问 - 请问，我想我真的可以帮忙！

Answer 4

您可以在顶部和底部使用剪辑路径，将其添加到您的CSS，如果浏览器不支持剪辑路径，它将不会在世界末日，它将显示边框图像。

a > img{
  /* top, right, bottom, left */
  -webkit-clip-path: inset(2px 0px 2px 0px);
  clip-path: inset(2px 0px 2px 0px);
}

使用CSS裁剪图片

4 个答案:

进一步阅读