Question

<head>
<style>
.relative{position:relative; width:600px;}
.absolute-text{position:absolute; bottom:1; font-size:12px; font-family:"vedana"; background:rgba(251,251,251,0.5);
padding:10px 20px; width:10%; text-align:center;}


</style>
</head>
<body>

<div class="relative">
	<img src="Chttps://i.stack.imgur.com/Ss3PX.jpg">
		<p class="absolute-text">16<br>august</p>
</div>

                                          

</body>

我有一张图片，想要使用html和css在图片的左上角添加一些文字...
这是一张图片，看起来像这样：

我尝试了很多次，但是没有来。

Answer 1

您必须使用css位置绝对值和相对位置。使父母亲和孩子亲戚。

.container {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="https://www.w3schools.com/w3images/hamburger.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 2

您可以使用绝对定位来独立放置文本和图像。这样，您就可以在页面上的任何位置（包括图片的顶部）放置文本。

Answer 3

您可以尝试类似的事情

html：

 <div class="img">
    <a href="">Link</a>
    </div>

css：

.img{
    background-image: url('img_location');
    width:100px;
    height:100px;
    position:relative;
}
a{
    display: block;
   position:absolute;
    bottom: 0;
    left: 0;
}

Answer 4

您忘记在px行中的1后给bottom: 1;

.relative{
  position:relative; 
  width:600px;
 }
 
.absolute-text{
  position: absolute; 
  bottom: 0; 
  font-size: 12px; 
  font-family: "vedana"; 
  background: rgba(251,251,251,0.5);
  padding: 5px 10px; width:10%; 
  text-align: center;
  margin: 0;
 }

<head>
<style>



</style>
</head>
<body>

<div class="relative">
	<img src="https://i.stack.imgur.com/Ss3PX.jpg">
	<p class="absolute-text">16<br>August</p>
</div>

                                          

</body>

Answer 5

->写底部时非常简单：1;更改bottom：0;

->请记住，当您在CSS中写入大于0的值时，请以px为例（例如1px，2px等）写入值。

<head>
<style>
.relative {
  position:relative;
  width:600px;
}
.absolute-text {
  position:absolute;
  bottom:0;
  font-size:12px; 
  font-family:"vedana";
  background:rgba(251,251,251,0.5);
  padding:10px 20px;
  width:10%; 
  text-align:center;
}


</style>
</head>

<body>
  <div class="relative">
    <img src="Chttps://i.stack.imgur.com/Ss3PX.jpg">
    <p class="absolute-text">16<br>august</p>
  </div>                                        
</body>

在图像中放置文字

5 个答案: