Question

我正在尝试在高度可变的图片下放置一些文字（绝对定位）我尝试将其设置为“亲戚”。但是它不会产生我真正想要的可变高度的影响。

CSS

＆＃13;

header{
  background-color: #f49b42;
}

body{
  font-family: Lora;
  margin: 0;
  padding: 0;
}

img{
  width: 100%;
  height: auto;
  clip: rect(0px,10000px,400px,0px);
  position: absolute;
}

h1{
  font-family: Pacifico;
  margin: 0 20px;
}

p#feelgood{
  position: absolute;
  color: wheat;
  margin: 80px 0;
  text-align: center;
  width: 100%;
  text-shadow: 0px 1px #4c2816;
}

p{
  margin: 20px;
  text-align: justify;
}

span{
  font-family: Pacifico;
}

＆＃13;

<body>

<header>
  <h1> Music </h1>
   <img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
  <p id="feelgood"> makes me feel good</p>
</header>

<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>

<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>

<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>

<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>

<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>


</body>

＆＃13;

这是我的jsfiddle（你可能看不到绝对定位与亲戚差异的影响，因为你不能让它足够宽） https://jsfiddle.net/goblincake/htgq07pb/

Answer 1

我认为这就是你想要的......

https://jsfiddle.net/htgq07pb/5/

header{
  background-color: #f49b42;
}

body{
  font-family: Lora;
  margin: 0;
  padding: 0;
}

img{
  width: 100%;
  height: auto;
  clip: rect(0px,10000px,400px,0px);
  position: relative;
}

h1{
  font-family: Pacifico;
  margin: 0 20px;
}

p#feelgood {
    position: absolute;
    display: inline-block;
    color: wheat;
    margin: -40% 0;
    text-align: center;
    width: 100%;
    text-shadow: 0px 1px #4c2816;
}

p{
  margin: 20px;
  text-align: justify;
}

span{
  font-family: Pacifico;
}

<body>

<header>
  <h1> Music </h1>
  <img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
  <p id="feelgood"> makes me feel good</p>
</header>

<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span></p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>

</body>

把div放在绝对img

1 个答案: