CSS：带透明盒子的彩色div

Question

有没有办法让背景颜色占用100％宽度的div和显示原始背景的透明框？

Answer 1

解决方案1：剪辑路径

剪辑路径非常有用，因为它可以使代码保持简洁。但是，它在浏览器中还没有很好的支持，因此只能在测试环境中使用。

html {
  background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
  height: 300px;
  width: 100%;
  background: tomato;
  position: relative;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 50% 0, 50% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 50% 20%, 50% 0);
}

<div>

</div>

解决方案2：Box shadow Trick

框影技巧使用伪元素和overflow:hidden;来创建元素的框阴影/着色。

html {
  background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
  height: 300px;
  width: 100%;
overflow:hidden;
  position: relative;
}
div:before{
  content:"";
  position:absolute;
  top:20%;width:60%;height:60%;left:20%;
  box-shadow:0 0 0 999px tomato;
  }

<div></div>

解决方案3：渐变

您可以使用多个渐变背景，但这可能适合也可能不适合，因为渐变并不总是很好地呈现：

html {
   background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
 }
 div {
   position: relative;
   height: 300px;
   width: 100%;
   background: linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato);
   background-size: 100% 20%, 20% 100%, 100% 20%, 20% 100%;
   background-position: left bottom, right bottom, left top, left top;
   background-repeat: no-repeat;
 }

<div></div>

解决方案4：边框

虽然这可能适用于您，也可能不适合您，但它仍有可能提供帮助，因此无论如何都会在此发布：

html {
   background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
 }
 div {
   position: relative;
   height: 300px;
   width: 100%;
   box-sizing: border-box;
   border-left: 20vw solid tomato;
   border-right: 20vw solid tomato;
   border-top: 50px solid tomato;
   border-bottom: 50px solid tomato;
 }

<div></div>

解决方案5：背景附件

我最近遇到了background-attachment财产，所以我仍然要抓住它。但是，如果您希望背景显示在后面，您可以根据需要更改以下代码段：

body {
  background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
  background-attachment: fixed;
}
.wrapper {
  width: 100%;
  height: 300px;
  background: tomato;
  position: relative;
}
.inner {
  width: 80%;
  height: 80%;
  background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
  background-attachment: fixed;
  position: absolute;
  top: 10%;
  left: 10%;
  box-sizing:border-box;
  border:2px solid black;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

Answer 2

你需要两个div。父母，红色背景，然后是内部div。

给出内部div余量：10px auto;作为一个开始。