Divs在边框设计上与固定背景发生冲突

Question

我对这个内容边框（.inner）和身体背景固定图像之间的冲突有疑问。

在标题和一些div类上，我正在使用背景隐藏边框并创建一个不完整的边框的错觉，在其中放置了标题和某些边框。

添加固定的背景后，如您所知，它不再起作用-对于标题和某些div，添加background: transparent;时边框变得可见。如何保持这种边框内容设计（.inner）并且仍然具有固定的背景，而不必使用其他div背景颜色或不必在some和title divs下显示边框。

body {
  background: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1.title {
  color: red;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 20px;
  background: blue;
  max-width: 70%;
  margin: -40px auto 0 auto;
}

div.inner {
  border: 4px solid red;
  color: #fff;
  padding: 15px 50px 50px 50px;
  margin-top: 100px;
  box-sizing: content-box;
}

div.some {
  text-align: center;
  background: blue;
  /*background: transparent; */
  max-width: 40%;
  margin: 0 auto -60px auto;
  position: relative;
}

div.some::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

div.some::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  border-left: 5px solid red;
  border-top: 5px solid red;
  width: 25px;
  height: 25px;
  float: right;
  transform: translate(50%, -50%) rotate(-45deg);
}

<div class="inner">


  <h1 class="title">Hello World</h1>


  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <br>
  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <br>
  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <br>


  <div class="some"> SoMe

  </div>


</div>