Поместите текст в изображение - PullRequest
Новая
       11

Поместите текст в изображение

0 голосов
/ 08 сентября 2018 

<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 ...
Вот изображение, которое выглядит примерно так:

enter image description here

Я пытался много раз, но это не пришло ..

Ответы [ 5 ]

0 голосов
/ 08 сентября 2018

-> так просто, когда пишешь дно: 1; изменить дно: 0;

-> помните, когда вы пишете значение больше 0 в css, пожалуйста, напишите значение с примером 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 голосов
/ 08 сентября 2018

Вы забыли дать 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>
0 голосов
/ 08 сентября 2018

вы можете попробовать что-то вроде этого

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;
}
0 голосов
/ 08 сентября 2018

Вы должны использовать абсолютную позицию 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>
0 голосов
/ 08 сентября 2018

Вы можете использовать абсолютное позиционирование для независимого размещения текста и изображения. Это позволяет размещать текст в любом месте страницы, в том числе поверх изображения.

...