css - 如何设置不影响背景图片的边框

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，因为边框每平行边占用 1 个像素。

但我希望我的图片仍然保持 100 像素/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>

增加边框效果明显

还是盒子阴影？

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>