آموزش و کد HTML قرار دادن متن روی عکس

قبلا برای استفاده از متن بر روی عکس در سایت ، توسط برنامه فتوشاپ انجام میدادند و تصویر طراحی شده را در سایت قرار میدادند اما امروزه متن و تصویر بصورت جداگانه میباشند که جالب تر و زیبا تر خواهد شد.
برای قرار دادن متن روی عکس از کد HTML استفاده خواهیم کرد. بدین منظور کافیست کد زیر را در جایگاه مناسبی از قالب خود قرار دهید
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.onvan{
text-align:center;
line-height: 13;
color:#FFFFFF;
background-image:url('image.jpg');
width:212px;
height:200px;
}
</style>
</head>
<body>
<div class="onvan"> متن شما </div>
</body>
</html>
در کد بالا بجای image.jpg ادرس تصویر خود را وارد نمایید . همچنین بقیه کد ها را طبق سلیقه خود میتوانید تغییر دهید










