在文档中放置文本

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之后给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;改变底部：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>

在文档中放置文本

问题描述投票：0回答：5

5个回答

最新问题

在文档中放置文本

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5