html - 如何将图像固定在画廊的右下角

Question

我有一个工作正常的画廊，但我想在画廊的右下角添加一张图片，所以我想要：

我知道这个 css 可以解决它：

#container_logo {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    width:75%;
    height:75%;
    background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
    background-size:100%;
}

但是如何将其添加到当前代码中？

我尝试添加额外的一行 background:url(http://blog.logobee.com/free-logo1.jpg)：

#containingDiv {
    width:100%;
    margin:0 auto;
    padding:0px 0 0 0;
    background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
}

但它没有显示在正确的位置......

• 如何更改容器代码，使其在右下角具有固定图像？

这是结果

请看一下完整的小提琴

Answer 1

尝试将div包含徽标的宽度设置为div包含图片的宽度（确保这是一个不变的数字，例如百分比）。如果高度和宽度与大图相同。徽标的设置bottom: 0px; right: 0px;应使其出现在图片的右下角。如果您正在使用margin并padding调整主图片的位置，请确保将其包含在徽标图片中，以便无论在什么大小的窗口中查看它，它们都位于同一位置。

Answer 2

看看这个http://jsfiddle.net/KGk9f/5/

您需要添加

 <div id="container_logo"></div>   

到

<div id="containingDiv">

并进行一些 CSS 更改...

#containingDiv {
width:680px;    
height:470px;
position:relative;

margin:0 auto;
padding:0px 0 0 0;
}

#container_logo {
position:absolute;
z-index:500;
width:150px;
height:150px;

right:0;    
bottom:0;
margin:0;
background:url(http://blog.logobee.com/free-logo1.jpg) no-repeat bottom right;
background-size:100%;

}

希望能帮助到你...