Fatal编程技术网
  • html/
  • Html 图像上的文本

Html 图像上的文本

html css

Html 图像上的文本,html,css,Html,Css,嗨，这是我第一次完全从头开始制作一个网站，我正试图让我的网站有不断变化的背景图片，而不是真正的背景图片（因为我不知道怎么做） 问题是我无法让文本出现在图像的顶部，我已经尝试了GOOGLE.COM链接到我的所有内容 我如何把图像放在后面，直到任何东西自动出现在它上面，同时保持在中间 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

嗨，这是我第一次完全从头开始制作一个网站，我正试图让我的网站有不断变化的背景图片，而不是真正的背景图片（因为我不知道怎么做）

问题是我无法让文本出现在图像的顶部，我已经尝试了GOOGLE.COM链接到我的所有内容

我如何把图像放在后面，直到任何东西自动出现在它上面，同时保持在中间

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Home</title>
        <link href="css/background.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

<p>This is the content for Layout P Tag</p>

    <img src="4.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="3.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="2.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="1.jpg" style= "height: 100%; width: 100%" align="absbottom">

    </body>
</html>
在
p
标签上需要一个
z-index:2
和
position:relative

p {position:relative;z-index:2;}
完整代码：

body img{
位置：绝对位置；
最大宽度：自动；
高度：自动；
}
.收音机{
位置：绝对位置；
}
@-webkit关键帧imgFade{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
25% {
不透明度：0；
}
92% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧imgFade{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
25% {
不透明度：0；
}
92% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-o-关键帧imgFade{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
25% {
不透明度：0；
}
92% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧imgFade{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
25% {
不透明度：0；
}
92% {
不透明度：0；
}
100% {
不透明度：1；
}
}
人体内模{
位置：绝对位置；
排名：0；
右：0；
z指数：1；
-webkit动画名称：imgFade；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：无限；
-webkit动画持续时间：64秒；
-moz动画名称：imgFade；
-moz动画计时功能：轻松输入输出；
-moz动画迭代次数：无限；
-moz动画持续时间：64s；
-o-动画名称：imgFade；
-o-动画-计时-功能：轻松输入输出；
-o-动画-迭代-计数：无限；
-o-动画持续时间：64s；
动画名称：imgFade；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画持续时间：64秒；
}
车身img：第n种类型（1）{
-webkit动画延迟：48秒；
-moz动画延迟：48s；
-o-动画延迟：48s；
动画延迟：48秒；
}
车身img：第n种类型（2）{
-webkit动画延迟：32秒；
-moz动画延迟：32s；
-o-动画延迟：32s；
动画延迟：32秒；
}
车身img：第n种类型（3）{
-webkit动画延迟：16秒；
-moz动画延迟：16s；
-o-动画延迟：16s；
动画延迟：16秒；
}
车身img：第n种类型（4）{
-webkit动画延迟：8；
-moz动画延迟：8；
-o-延迟：8；
动画延迟：8；
}
p{位置：相对；z索引：2；边框：1px实心#ff0000；}

家
这是布局p标记的内容
@Cosmonot给出了一个很好的答案 
p {position:relative;z-index:2;}