前后响应图像 <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>