Question

我正在尝试在“产品卡”列表中的图片上方添加文本。左上方和右上方的div类不会出现在图像上方。这是我的代码：

.cardcontainer {
    position: relative;
}
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}

<section class="4u">
    <div class="cardcontainer">
        <a href="https://{{ jinja image link }}" target="_blank" class="image featured"><img src={{ jinja image source }} alt=""></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            <!--some stuff here that appears below the image-->
        </div>
    </div>
</section>

有什么想法吗？谢谢您的帮助！

Answer 1

根据您的代码，我假设您没有考虑图像的大小可能会有所不同。 <div>标签实际上消耗了图像的整个宽度。 <img>但是没有遵循相同的规则。如果您的图片宽度为300px，除非通过width属性或样式指定，否则它将保持不变。

您将需要考虑调整图像的大小以匹配<div>容器的宽度。

以下是经过调整的代码，您可以签出：

<section class="4u">
    <div class="cardcontainer">
        <a href="https://localhost" target="_blank" class="image featured"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png"} alt=""></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            Here's some text below
        </div>
    </div>
</section>

在以下样式中，我将图像的宽度与.cardcontainer相匹配。您当然可以随时更改。我还为.textbox添加了样式，以将其放置在您指定的图像顶部。

.cardcontainer {
    position: relative;
    width: 500px;
}

.cardcontainer img {
  width: 100%;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.textbox {
  position: absolute;
  bottom: 8px;
  background-color: black;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

您也可以在此链接中使用它： https://jsfiddle.net/f7a5ow9q/

Answer 2

这是在图像上方添加文本的代码。 在此我在不同位置添加了文本，以便您可以了解如何在不同位置看到文本，并可以根据需要设置：

HTML：

CoversionType

CSS：

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

在这种情况下，我处于不同的位置，这样您就可以将文本放置在哪里。

如果您对代码有任何疑问，请随时提出。

Answer 3

<!DOCTYPE html>
<html>
<head>
<style>
.cardcontainer {
    position: relative;
}
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
</style>
</head>
<body>

<section class="4u">
    <div class="cardcontainer">
        <a href="" target="_blank" class="image featured"><img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="" style="width:100%;"></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            Dummy Text 
            Dummy Text
        </div>
    </div>
</section>

</body>
</html>

在HTML CSS中的图像上添加文本

3 个答案: