Shulou(Shulou.com)06/03 Report--

This article introduces how to perfectly implement text on top of pictures and background translucency in web development. The content is very detailed. Interested friends can refer to it for reference. I hope it can help you.

Before I sent an article about displaying the caption text of the picture on top of the picture and the background translucent effect, I described how to put the text on top of the picture and the background translucent, but the solution will have a problem, that is, although the background is translucent, the text will also be translucent. Today, I found the implementation method on Baidu Travel, which perfectly realizes this function. Now I share the code as follows:

The code is as follows:

Text placed on top of picture and background translucent standard road www.aa25.cn

a.title { color:#D3D3D4; background-color:rgba(0,0,0,0.6);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A0000000', EndColorStr='#A0000000');

padding: 12px 24px;

position: absolute;

top: 228px;

left:0;

width: auto;

text-decoration: none;

font: 16px Microsoft YaHei, Verdana;

color:#fff;

Exploring the Life of Ancient Emperors

About web development how to perfectly achieve text placed on top of the picture and background translucent to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.