前后響應圖像 <h1> 標簽

Question

我想做這樣的事情： 預覽

這個想法是在CSS的H1標簽之前和之后制作響應圖像。 但是我唯一能做的就是放一條普通的JSFiddle行。

<h1 ><i class="logo"></i><span>HELLO WORLD</span></h1>

<style>
h1 {
position: relative;
color: #fff;
font-family: sans-serif;
font-size: 4.6rem;
font-weight: 700;
line-height: 4.6rem;
letter-spacing: .02rem;
margin: 0 auto 5rem;
padding: 0 1rem;
text-align: center;
text-transform: uppercase;
}

h1 span {
  display: inline-block;
  position: relative;
  padding: 0 20px;
}
h1 span:before, h1 span:after {
  content: '';
  display: block;
  width: 500px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid white;
}
h1 span:before {
  right: 100%;
}

h1 span:after {
  left: 100%;
}
</style>

我設法以某種方式獲取h1標記之前和之后的圖像，但是它們沒有響應JSFiddle 。

<h1 class="heading"><i class="logo"></i>Welcome World</h1>
<style>
h1{
  display: block;
}

h1.heading {
  position: relative;
  color: #fff;
  font-family: sans-serif;
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 4.6rem;
  letter-spacing: .02rem;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  margin-top: 30px;
  padding: 0;
}
h1.heading:before {
  display: inline-block;
  margin: 0 20px 8px 0;
  content: " ";
  text-shadow: none;
  background: url(https://i.imgur.com/fcoggcZ.png) no-repeat;
  width: 100%;
  height: 87px;
  position: absolute;
    left: 0%;
}
h1.heading:after {
  display: inline-block;
  margin: 0 20px 8px 0;
  content: " ";
  text-shadow: none;
  background: url(https://i.imgur.com/KCzu3hE.png) no-repeat;
  width: 100%;
  height: 87px;
  position: absolute;
    right: -83rem;
}
</style>

抱歉，代碼有點混亂，我仍然是初學者。

Answer 1

您只需要固定before和after元素的寬度即可。 它們是100％，所以占用了標題的整個寬度。

我還放下了字體大小。 如果您希望它在更大的屏幕上顯示，則必須通過媒體查詢來解決。

 body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; background: #000; } h1{ display: block; } h1.heading { position: relative; color: #fff; font-family: sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 87px; letter-spacing: .02rem; text-align: center; text-transform: uppercase; width: 100%; margin: 0; margin-top: 30px; padding: 0; } h1.heading:before { display: inline-block; margin: 0 20px 8px 0; content: " "; text-shadow: none; background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center; width: 30%; height: 87px; position: absolute; left: 0; } h1.heading:after { display: inline-block; margin: 0; content: " "; text-shadow: none; background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center; width: 30%; height: 87px; position: absolute; right: 0; } 

 <h1 class="heading"><i class="logo"></i>Welcome World</h1> 

編輯

我太喜歡這些了……比較安全的選擇是將文本包裹在一個范圍內，然后放棄絕對位置。 這樣，如果空間過緊，它將進入另一行。

 body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; background: #000; } h1{ display: block; } h1.heading { position: relative; color: #fff; font-family: sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .02rem; text-align: center; text-transform: uppercase; width: 100%; margin: 0; margin-top: 30px; padding: 0; } h1.heading:before { display: inline-block; margin: 0; content: " "; text-shadow: none; background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center; width: 30%; height: 87px; left: 0; vertical-align:middle; } h1.heading:after { display: inline-block; margin: 0; content: " "; text-shadow: none; background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center; width: 30%; height: 87px; display:inline-block; vertical-align:middle; } h1.heading span { width:40%; display:inline-block; vertical-align:middle; } 

 <h1 class="heading"><span>Welcome World</span></h1> 

Answer 2

有趣的是，您還可以使用flexbox簡化您的代碼， flexbox與偽元素完全兼容。

令人高興的是，圖像位置將調整為標題寬度，因此您可以為h1 div定義一個最大寬度，然后讓flexbox處理其余部分。

 body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; background: #000; } h1{ display: flex; color: #fff; font-family: sans-serif; letter-spacing: .02rem; text-align: center; text-transform: uppercase; min-height: 87px; } h1:before, h1:after { content: " "; flex: 1; } h1 div { padding: 0 20px; align-self: center; } h1:before { background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right 20px center; } h1:after { background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left 20px center; } 

 <h1><div>Welcome World</div></h1> <h1><div>Hey</div></h1>