文章/答案/技术大牛

发布

社区首页 >问答首页 >在HTML + CSS中使文本出现在背景上

问在HTML + CSS中使文本出现在背景上
EN

Stack Overflow用户

提问于 2017-09-11 19:50:19

回答 2查看 922关注 0票数 3

大家好，这是我制作的第一个网页，我正试图显示一个gif作为背景，并使文本出现在上面。一切正常，除了我似乎无法将文本显示在gif背景之上。正如您在源代码中看到的，我有一个标题和三个段落，有人知道如何修复这个问题吗？

<!DOCTYPE html>
<html>
    <head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
    <title>FirstWebpage</title>

    <style>
body{ /* Will use a gif as background */
	background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
	background-position: relative;
	background-size: cover;
    }


    </style>
    <audio autoplay loop>
    <source src="seffelinie.mp3" type="audio/mp3">

    </head>
<body>
    <div align="center" id="text">
    <h1>First Webpage</h1>
    <p>HTML</p>
    <p>+</p>
    <p>CSS</p>
    </div>	
</body>
</html>

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-11 19:59:40

我猜想，音频标签位于文本的顶部，用以下内容替换：

<audio autoplay loop> 
    <source src="seffelinie.mp3" type="audio/mp3"> 
</audio>

票数 0

Stack Overflow用户

发布于 2017-09-11 21:18:19

你的代码有点混乱。如前所述，您忽略了关闭的音频标记，但您也在关闭<head>元素之后，该元素应该在<body>标记中，还有您的html代码的其余部分。最后，我清理了您的背景图像CSS，以使用最佳实践的基础上，我认为您的意图。background-position: relative;不是一种选择。background-position与position不同，它是为了告诉浏览器父服务器的哪些方面可以基于- 比如“顶部中心”或“左下角”定位图像。在您的情况下，由于您希望图像始终覆盖，所以我认为在所有情况下最好是垂直和水平地对图像进行居中，这就是background-position: center`所做的。

<!DOCTYPE html>
<html>
    <head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
    <title>FirstWebpage</title>

    <style>
    body{ /* Will use a gif as background */
        background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    </style>
</head>
<body>
    <audio autoplay loop>
      <source src="seffelinie.mp3" type="audio/mp3">
    </audio>
    <div align="center" id="text">
    <h1>First Webpage</h1>
    <p>HTML</p>
    <p>+</p>
    <p>CSS</p>
    </div>  
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46163378

复制

相似问题

问在HTML + CSS中使文本出现在背景上
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML + CSS中使文本出现在背景上EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML + CSS中使文本出现在背景上
EN