Question

我有一个网站，我想要覆盖一段文字，除非用户点击它，但当我尝试将图像放在文本的顶部时，它会使图像环绕图像，任何想法都在如何在背景中制作图像而不是取代任何东西？

代码：

<img src="http://i980.photobucket.com/albums/ae282/Omnilord97/Transparent.png" 
     width="250" height="450" alt="photo Transparent.png" align="middle">

Answer 1

将其设为背景图像并显示/隐藏其中的div。这是Fiddle

HTML

<div class="image">
    <div class="text">
        This is the text to show
    </div>
</div>

CSS

/*--Original Background Image or Color--*/
.image {
    background:red; /*-- For image bg use: url('http://example.com/image.jpg'); --*/
    width:250px;
    height:450px;
}

/*--New Background Image or Color--*/
.image.showText {
    background:#ececec; /*-- For image bg use: url('http://example.com/image.jpg'); --*/
}

.image .text {
    display:none;
    padding:20px;
}

.image.showText .text {
    display:block;
}

的jQuery

$(".image").click(function(){
    $(this).toggleClass("showText");
});

制作图像不会取代HTML中的其他图像

1 个答案: