如何使背景连续？

Question

如您所见，在标题栏中，只有上半部分有背景，我希望整个标题栏具有相同的背景。当然，我可以为标题栏本身设置背景，但这样背景看起来就不会连续，正如您在 fiddle.

中看到的那样

有没有办法用纯 css 实现这个？

.header {
  width: 100%;
  padding-top: 30%;
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
  background-size: cover;
  position: relative;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  padding: 8px 24px;
  font-size: 24px;
  background: none;
  border-radius: 50px;
  border: 4px solid white;
  left: 10%
}

body {
  background-color: #eee
}

.title.b {
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
  background-size: contain
}

<div class="header">
  <div class="title"> Title Title </div>
</div>

<div class="header" style="margin-top:60px">
  <div class="title b">
    Title Title
  </div>
</div>

Fiddle: https://jsfiddle.net/s7pkr2w8/1/

Answer 1

您可以尝试将背景设置在 parent 元素上或仅将事件设置为整个 body:

 body{
   background:url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
   background-size:cover;
}

Answer 2

这是一个使用裁剪和遮罩的想法

.header {
  padding-top: 30%;
  position: relative; /* relative here !! **/
  display:flex;
  z-index:0;
}
.title {
  font-size: 24px;
  color:#fff;
  border-radius: 50px;
  margin:auto auto 0 10%; /* position the element using flexbox instead of absolute */
  -webkit-mask:linear-gradient(#fff 0 0); /* clip the pseudo element to only the title shape*/
}
/* extra div needed for the white border*/
.title > div {
  padding: 8px 24px;
  border:4px solid #fff;
  position:relative;
  border-radius: inherit;
}
/**/
/* two pseudo element relative to the container having the same background
   to have the continuous effect
*/
.title::before,
.header::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%/cover;
}

.header::before {
  clip-path:inset(0 0 20px 0); /* cut 20px from the bottom to be around the middle of the title */
}

body{
  background-color:#eee
}

<div class="header">
  <div class="title">
    <div>Title Title</div>
  </div>
</div>

如何使背景连续？

How can I make a background continuous?

html

css

background-image