代码之家 › 专栏 › 技术社区 › Dimitris Baltas

如何在另一个图像上放置图像

css html

Dimitris Baltas · 技术社区 · 14 年前

在一个DIV中,有一张图片应该在DIV边界的所有方向上都有10px的空白。在图片的左下角有一个关于图片。
只有通过jquery将图片加载到DOM中时,才会显示该图片。问题是,关于图像的存在会使图像向下错位,像素数与关于图像的高度相同。

我正在寻找最干净的替代方案,以保持图片在分区内,并仍然显示关于它上面的图像。将图片设置为背景将不起作用,因为我需要立即加载图片。

对CSS的任何改进都将非常感谢。
下面是一个完整的HTML页面,可复制此问题

<html>
<head>
<title>Troubleshooting :: align the main picture inside the DIV</title>
<style type="text/css">
html, body  {
   background-color: #000000;
}

#about {
    z-index:2;
    position:relative;
    top:82%;
    left:3%;
}

#pic {
    width:100%;
    height:96%;
}

#main-content-image {
    height:100%;
    margin-right:10px;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;
}

#main-content {
    height:490px;
    border-width: 1px;
    border-style: solid;
    border-color: #777777; 
}
#main-content-image.loading {
  background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center;
}

a  {
   text-decoration: none;
   text-decoration: none;
   color: #868686;
   outline:none;
}

.hide {
    display:none;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
    $(document).ready(function(){    

        $(function () {
            var img = new Image();
            $(img).load(function () {
                $(this).hide();
                $(this).width('100%');
                $(this).height('96%');
                $('#main-content-image').removeClass('loading').append(this);
                $(this).fadeIn();
            }).error(function () {
                // notify the user that the image could not be loaded
            }).attr('src', 'http://farros.gr/images/bg.jpg');
        });

    });
    </script>
</head>
<body>
    <div id="main-content">
        <div id="main-content-image" class="loading">
            <a href="#"><img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/></a>
        </div>
    </div>
</body>
</html>

3 回复 | 直到 14 年前

Tesserex 14 年前

使用位置:绝对为关于图片,你可以把它放在任何你想要的地方。还要确保将主要内容图像设置为位置:相对,使其成为关于图像的参考点。

编辑:我已经用你的HTML测试过了,它可以工作。

Daniel Sloof 14 年前

一个(肮脏的)javascript解决方案是给包装图像的锚定“about”ID,并将“about”设置为“display:block;”

然后,在图像加载回调中添加以下语句:

$(this).css({marginTop: "-40px"});

当心向下投票者;我不喜欢让标记依赖于JavaScript代码执行,但无论如何,他的代码中已经发生了这种情况。

Armstrongest 14 年前

绝对定位将实现你所追求的:

#main-content-image {
  position: relative; /* Needed so absolute positioning works on child */
}

#about { 
  position: absolute; /* absolutely positioning it takes it out of the document flow */
  bottom: 10px; /* You said you wanted it on the bottom left, right? */
  left: 10px; 
}