个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我试图将一些文本放在具有可变高度(绝对定位)的图片下方 我尝试将其设置为“相对”，但它不会产生我真正想要的网站可变高度的效果。
CSS
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;
}<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>这是我的 jsfiddle(你可能看不到绝对定位与相对定位差异的影响，因为你无法将其设置得足够宽) https://jsfiddle.net/goblincake/htgq07pb/
最佳答案
我想这就是你想要的......
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>关于css - 把div放在absolute img下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45517001/
25
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SS
我有一个布局，它有一个 EditText，当用户输入时应该在它下面显示建议。我以编程方式创建了一个 RecyclerView，它应该在 EditText 下面显示建议项目。但是当用户输入时它不显示 R
我正在尝试将 下面各三 s(一个 每三个 s)，但是我得到了意想不到的结果。我得出的结论是我必须放一个 低于三分之一 ，但是当我这样做时，它的位置不正确(请参阅演示)。 我正在使用这个 Djan
我知道这个问题已经被问过好几次了，我已经尝试了其他答案中建议的所有方法，但似乎没有任何方法可以使我的 div 位于需要的位置。奇怪的是，一夜之间我的一个 div 想要低于前一个 div。开始时是 fl
好的，我明白了，当离开 .wrapper 时，带有 overflow:hidden 的元素 .wrapper 的所有子元素都会被自然切割的边界框。但这里我只应用了overflow:auto。 是关于下
我有一个元素 The result is ... Test_then 类如下所示: .Test_then::before { content: 'Then'; } 我的目标是让 (The resu
我有一个下拉菜单，它适用于除 IE6 和 IE7 之外的所有内容。 Here it is in the Safari/Firefox browsers Here is how it looks in
我尝试从支持库 13 实现最新的抽屉布局。使用以下代码，抽屉始终显示在 gridview 下方。即使我尝试调用 bringToFront() 仍然无法正常工作。能帮忙看看是什么问题吗？谢谢。 acti
这个问题在这里已经有了答案: using a div to blur an image behind it? [duplicate] (2 个答案) 关闭 7 年前。 我目前正在 Photoshop
我正在阅读一本有关 Java 的书，并发现了以下源代码。 //This example demonstrates how to search multiple occurences of a sear
我想让一个新的/隐藏的 div 从另一个 div 下面滑下来。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素(从下方滑出)。这个的形式部分对我的问题并不重要，所以我只让第
我正在制作一种标签栏，其下方有一个指示器，指示选择了哪个标签。我的 View 层次结构非常简单: --------------------------------- |-------------
我什至不知道如何描述这一点，我还在学习，而且还是个新手。 我有一个用于容器的 div。 里面有一个用于菜单的 div 和一个用于内容的 div，两者并排向左浮动。 对于大多数普通内容，它们并排放置。然
我想要一个与浏览器窗口高度相同的 div，以及位于该 div 下方的另一个 div。 我所有的尝试都未能堆叠 div，而是将它们重叠。 我的元素正在尝试的一种天真的实现。 这是我的 fiddle
我正在尝试根据 this codepen 设置联系表单的样式并且 float 表单在其父 div 下面而不是在其中时遇到问题。我试过添加一个 clearfix，但没有成功。我也没有运气就把溢出弄得一团
我是网络开发新手，需要一些帮助来解决这个简单的问题。调整大小时，菜单项会移动到名称下方，有人能告诉我哪里搞砸了吗？ 我一直在阅读其他一些解决方案并了解想法，但就是找不到我的错误。 > A
我正在尝试为移动设备开发一个 HTML5 应用程序。布局是非常基本的标题和内容。 标题(红色矩形)、内容(绿色矩形)是绝对 div。如果高度大于屏幕，则内容必须是可滚动的。 当我试图只在橙色矩形 di
我正在尝试将这个 ul 移动到 div 下面，我什至不确定这是否也是完美的方法， 这是代码， HTML User 1
我的处境很复杂。首先，我有两列，当屏幕变小时，它们会在彼此下面。我的问题是在其中一列中我有一个相对的 div。我想要另一个 div 直接在它下面，但它一直与第一个 div 重叠。 这是我的代码:
例如，如果我使用了对齐，如何将一张 table 放在另一张 table 下面。 center_table left_table desired_table
我是一名优秀的程序员,十分优秀！