HTML CSS examples for CSS Widget:Image Text
display text under background image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .bg {<!--from w ww. j av a 2s .c om--> width:100px; height:100px; float:left; display:block; margin-right:5px; background-image:-ms-linear-gradient(top left, Chartreuse 0%, yellow 100%); background-image:-moz-linear-gradient(top left, blue 0%, pink 100%); background-image:-o-linear-gradient(top left, OrangeRed 0%, grey 100%); background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0, BlueViolet), color-stop(2, Chartreuse)); background-image:-webkit-linear-gradient(top left, yellow 0%, blue 100%); background-image:linear-gradient(top left, pink 0%, OrangeRed 100%); } </style> </head> <body> <ul> <li class="bg"> <span style="margin-top: 100px; display: block">Lorem </span> </li> <li class="bg"> <span style="margin-top: 100px; display: block">Lorem </span> </li> <li class="bg"> <span style="margin-top: 100px; display: block">Lorem </span> </li> </ul> </body> </html>