Question

我的页面中心有一个div，我希望在中间有一个白色背景，然后，好吧，说你在适当大小的图片的所有边缘拍了10px，并把它放在白色的边缘基本上是白色背景，但是全尺寸图像只能通过外部10px显示。

我尝试使用border-image属性系列的所有内容似乎都没有做我想要的，它只会将我想要的图片放在边框的每个角落。

感谢您的帮助！

Answer 1

你必须将div放入div。第一个div更大，他的背景是你的图片，它的填充= 10px。第二个较小，包含白色背景。

Answer 2

您可以使用位置relative创建div并将图像放入其中。其次将掩码置于伪:before或:after中，并使用absolute / top / right / bottom将其置于left位置彼此相等，如60px和风格。

＆＃13;

div {
  width: 400px;
  height: 400px;
  background-image: url(http://placehold.it/400x400/4aa3df);
  background-size: cover;
  position: relative
}

div:before {
  content:'';
  position: absolute;
  display: inline-block;
  top: 60px;
  left: 60px;
  right: 60px;
  bottom: 60px;
  background-color: #eee;
  z-index: 9999
}

＆＃13;

<div></div>

＆＃13;

Answer 3

background-clip + padding或border或者两者都应该使用渐变来绘制纯色：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

＆＃13;

body, p , div {
  background:linear-gradient(white,white), url(http://lorempixel.com/300/300/abstract/10) center;
 /* background-size:auto auto,cover;*/
  background-clip : content-box, border-box;
  margin:1em;
  padding:1em;
  box-shadow:0 0 0 3px, inset 0 0 0 3px red ;/* borders needs to be used for demo, this fakes one outside and inside */
  min-height:30px;
  text-align:center;
  }
p {
  padding:0;
 
  border:solid 1em transparent 
    }
body {
  
  border:solid 1em transparent
    }
html {
  background:gray;

＆＃13;

body: 1em padding + 1em border. <b>Notice where stands inset red shadow in containers</b>
<div>div: 1em padding </div>
<p>p: 1em border</p>

＆＃13;

如何使用img作为边框使DIV背景成为纯色？

3 个答案: