Question

我想做这样的事情：Preview

这个想法是在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％所以占据了标题的全部宽度。

我也放弃了字体大小。如果您希望它在更大的屏幕等上生长，您必须使用media queries来处理它。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

修改

我太过分了...... 一个更安全的赌注是将文本换成一个跨度，然后放下你的绝对位置。就这样，如果空间太紧 - 它会进入另一条线。

＆＃13;
＆＃13;
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; }
＆＃13;
<h1 class="heading"><span>Welcome World</span></h1>
＆＃13;
＆＃13;
＆＃13;

Answer 2

为了好玩，您还可以使用 flexbox 来简化代码，这与伪元素完全兼容。

好处是图像位置将调整为标题宽度，因此您可以定义h1 div＆amp;的最大宽度。让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>

<h1>标记之前和之后的响应图像

2 个答案: