Question

我的页面上有不同大小的图片。我试图在图像的左下角和右下角放置文本，显示上传者和收藏的人数。目前中心有文字。如何让文本在每个图像上的相同位置？

我试过这个但是在较高的图像上差距较大

我的代码

<body>
    <div class="container">
        <h1>Browse</h1>
        <div class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "layout" }'>
            <div class="grid-sizer"></div>
            <?php
            while ($row = $get_images->fetch()) {?>
                <a class="grid-item" href="image.php?id=<?php echo $row['image_id']; ?>">
                    <img src="<?php echo $row['image_url']; ?>" alt="<?php echo $row['image_title']; ?>">
                    <div class="overlay">
                        <div class="text"><?php echo $row['image_title']; ?></div>
                        <div class="uploaded-by"><?php echo $row['username'];?></div>
                        <div class="favourites"><?php echo $row['image_earned_points'];?></div>
                    </div>
                </a>
            <?php }?>
        </div>
    </div>
</body>

我的CSS （到目前为止）

.grid-item {
    float: left;
    padding: 2px;
}
.grid-item img {
    display: block;
    max-width: 100%;
    backface-visibility: hidden;
    opacity: 1;
  }
.grid-item img:hover {
    transform: scale(1.01);
    opacity: 0.3;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background: rgba(33, 26, 33, 0.815);
}
.grid-item:hover .overlay{
    opacity: 1;
}
.text {
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.uploaded-by {
    position: relative;
    top: 87%;
    right: 40%;
}
.favourites {
    position: relative;
    top: 70%;
    left: 40%;
}

要查看的课程是uploaded-by，需要位于左下方，favourites位于右下角。

图片可以在这里找到它输出的内容example

Answer 1

这应该让你开始。

#container {
    position: relative;
    height: 400px;
    width: 400px;
}

p {
    z-index: 100;
    position: absolute;    
    color: white;
    font-size: 24px;
    font-weight: bold;
    bottom: 5px;
}

#left {
    left: 20px;
}

#right {
    right: 20px;
}

<div id="container">
    <img src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
    <p id="left">Hello</p>
    <p id="right">World!</p>
</div>

如何将文本对齐未知大小图像的左下角？

1 个答案: