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

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

آموزش و کد 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 ادرس تصویر خود را وارد نمایید . همچنین بقیه کد ها را طبق سلیقه خود میتوانید تغییر دهید

 

لینک کوتاه:

https://a4fran3.ir/?p=17252

guest
0 نظر
Inline Feedbacks
مشاهده همه نظرات

مطالب مشابه