How to add text on image using HTML and CSS? (code example)

In this article we will introduce to you how to use HTML and CSS to add text to images. The content is very detailed.

Without further ado, let’s get straight to the point~

1. The benefits of using HTML and CSS to express

are not “writing text into the image itself” ", but "Configuring text on images through HTML and CSS" has the following benefits. (Recommended tutorial: CSS video tutorial)

The characters will not be blurred even when zoomed in

It is also read in search engines (suitable for SEO)

You can choose the letters

Responsive design allows you to adjust the font size (you can do something like lowercase letters in your smartphone display...)

2. How to Placing text on an image

Step 1: We need to prepare an image

As an example, I want to place white text on a dark background.

Step 2: Place the image and letters in a div element

Put the image and letters in a div tag. In the example, place the text "Great Wall" in the p tag. Of course you can use title tags instead of p tags, or you can use span tags.

<div class = "example" >  
<img  src="image/greatwall.jpg" alt="How to add text on image using HTML and CSS? (code example)" > 
<p>万里长城</p>
</div>

Step 3: Specify the position attribute

Set the css position attribute for each element.

Specify position:relative for the div as the parent element, and set absolute for the p tag containing the string. The img tag doesn't move.

Set the position of the p tag to top:0; left:0.

In order to place the image in landscape orientation, please specify the width of the img tag as width: 100%.

.example{/*父元素div*/
  position: relative;/*相対定位*/
  }
.example p {
    position: absolute;/*絶対定位*/
  color: white;/*文字设为白色*/
  top: 0;  
  left: 0;
  }
.example img {  
  width: 100%;
  }

The effect is as follows:

The text appears in the upper left corner of the image. position:absolute parent element will determine the position relative to the parent element. top:0; left:0 means "the image will be placed in the upper left corner of the parent (div)".

Step 4: Adjust the text style

Let’s adjust the font style now, try to enlarge the font and make it bold. In addition, in order to show a good-looking effect, also change the type of font.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
    top: 0;  
    left: 0;
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;   
}
.example img{width: 100%;}

The effect is as follows:

This is completed. Please explain: If you want to fix the size of the image to a certain pixel, please follow the width : In 100% of cases, the width of the div of the parent element is specified as a fixed pixel.

3. Place the text in the middle of the image

In some cases, I want to "place the text in the center of the image". In this case, the CSS code should As follows.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
   /* top: 0;  
    left: 0;*/
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
    
}
.example img{width: 100%;}

The effect is as follows:

Let’s explain the above centering

top and left are 50%

This is basically placed in the middle. However, this would deviate from the size of the text.

Error in adjusting the text part

Use transform: translate to correct the text difference. In translate(-50%,-50%), the difference between vertical and horizontal text is corrected. ttransform is a CS3 attribute, but it also corresponds to other browsers besides IE8.

To correspond with older browsers, translations are also written with vendor prefixes (-ms and -wabkit-).

If magin and padding are added and there is still space, it may be off-center. Therefore, just to be cautious, let's change its value to 0.

4. Display the category name with background color in the image

The following describes how to display text with background color on the image.

Please look at the following CSS code, the HTML is the same as above

.example {
  position: relative;
  }
.example p {
  position: absolute;  
  top: 0;
  left: 0;
  margin: 0; 
  color: white;
  background: lightblue;
  font-size: 15px;  
  line-height: 1;
  padding: 5px 10px;
  }
.example img {
  width: 100%;
  }

The effect is as follows:

When the label is attached to the corner of the image , characters are fixed. In this case, you can see clearly regardless of the brightness of the image. Likewise, if you want to change the size of the image, we recommend specifying the width for the div of the parent element.

The above is the detailed content of How to add text on image using HTML and CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!