Question

我知道我可以使用box-sizing:border-box;在元素实际宽度内创建边框，但我希望我的图像不受边框影响。例如：

div { 
    width:100px;
    height:100px;
    box-sizing:border-box;
    background-image:url("someplace/demo.jpg");
    background-size:100%;
    border:1px solid black;
}

使用上面的代码，图像的宽度和高度将是98px，因为每个parallal边的边框占用1个像素。

但是我希望我的图像仍然保持100 px / 100％并且边框作为图像顶部的重叠边框。

有没有办法做到这一点？

Answer 1

您需要将背景大小设置为容器的实际大小。

div {
  width:100px; 
  height:100px; 
  box-sizing:border-box; 
  background:url("http://lorempixel.com/100/100") center no-repeat ;
  background-size:100px 100px; 
  border:1px solid black;
}
img ~ div {
  border:15px solid rgba(100,200,0,0.5);
}
div + div {
  background-size:100%;
}
div, img {
  display:inline-block;
  }

<div></div>
<img src="http://lorempixel.com/100/100"/>
<div></div>
<div></div>

我在演示中插入了图像和更大的边框，以便轻松查看不同的效果

对于他的轮廓，你需要，轮廓偏移

div {
  width:100px; 
  height:100px; 
  box-sizing:border-box; 
  background:url("http://lorempixel.com/100/100") center no-repeat ;
  background-size:100px 100px; 
  outline:15px solid rgba(100,200,0,0.5);
  outline-offset:-15px;
  }

<div></div>

边界增加使效果明显

或box-shadow？

div {
  width:100px; 
  height:100px; 
  box-sizing:border-box; 
  background:url("http://lorempixel.com/100/100") center no-repeat ;
  background-size:100px 100px; 
  box-shadow:inset 0 0 0 15px rgba(100,200,0,0.5);
}

<div></div>

Answer 2

使用轮廓而不是边框

div { 
  width: 100px;
  height: 100px;
  background-image: url("someplace/demo.jpg");
  background-size: 100%;
  outline: 1px solid black;
}

Answer 3

.classname { outline: 2px solid red; }

参考：http://www.w3schools.com/cssref/css3_pr_outline-offset.asp

如何设置不影响背景图像的边框

3 个答案: