将图像放在段落上

时间:2015-11-23 00:12:30

标签: jquery html5

我试图将图像放在文本正文上。我的想法是,我将使用jquery动画来增加图像的不透明度,然后你可以看到它下面的文字。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您确实应该发布一些代码,请查看https://stackoverflow.com/help/how-to-ask

然而,这是一段简单的代码,应该让你开始。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display Demo</title>
<style>
.hidden {display:none;}
.block {
    position: relative;
    top: 30px;
    left: 30px;
    width: 800px;
}
.text, .img {
    position: absolute;
    top: 0;
    left: 0;
}
.img {
    display: none;
    z-index: 100;
}
</style>
</head>
<body>
<div class="block">
<img class="img" src="img.jpg">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
    $(".img").show(5000);
});
</script>
</body>
</html>

现在访问与.show.animate相关的jQuery文档,并将其更新为您想要的内容。