Use Text Image With CSS In Website

Use Text Image With CSS In Website


December, 28 2021

In today's article, I will introduce you to ways to combine text with images using CSS and Javascript to improve the user experience when using the website. Let's go to find out together!

CSS Text Image Examples

Setting Position Text Image CSS

In this section, I will show you how we can determine how to display the content in the image through the position property (This property helps you determine the position of the object in the web page). To understand better, see the following example:

See the Pen Hình Ảnh Với Nội Dung by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Linear Gradient Background Image

Sometimes you use images with too high a brightness, it will make it difficult for users to see the content in the image. So in this part we will create a background with a linear-gradient to increase the contrast between the image and the content without having to use photoshop. To understand better, see the following example:

See the Pen Sử Dụng linear-gradient cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Text On CSS Image

Many times you don't want to change the background color for the image with a linear-gradient, then we can set the background for the content and still have a bright color for the image. To understand better, see the following example:

See the Pen Hiển thị nội dung với background cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Blur Background Image CSS

Here's an extra effect for the example above that makes the content in your image stand out. To understand better, let's take a look at the following example:

See the Pen Hiển thị nội dung với background được làm mờ(blur) cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Transparent Background Image CSS

We will combine the image and the background of the content to create an effect called Transparent. Here I have a small note: background: rgba(0, 0, 0, 0.5); , it will create a black background and display an opacity of 0.5. Now to make it easier to imagine, let's go into an example:

See the Pen Hiển thị nội dung dưới dạng Transparent Image by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Background Image For Text With Background Clip

We will combine the image and the background of the content to create an effect called Transparent. Here I have a small note: background: rgba(0, 0, 0, 0.5); , it will create a black background and display an opacity of 0.5. Now to make it easier to imagine, let's go into an example:

See the Pen Hiển thị Background Hình Ảnh Cho Nội Dung Dưới Dạng Masking by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Letter With Background Image

In this section, we will set up each letter to be displayed on each line separately to bring a new feeling to the user. To understand better, see the following example:

See the Pen Hiển thị Nội Dung Dưới Dạng Từng Chữ Trong Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Modal Images CSS

Usually when the image size is used on phone screens, it will be a bit difficult to see, so in this part we will go into understanding the modal for the image to be able to expand the image size to improve the user experience as well. To make it easier to understand, see the following example:

See the Pen Tạo Modal Cho Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Summary

I hope the article will provide you with more image examples with useful text for development, the web and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!