آموزش قرار دادن متن روی عکس با کد در html
با سلام خدمت شما دوستان و وبمستران گرامی . در این مطلب میخوام کدی را به شما معرفی کنم که با استفاده از آن شما میتوانید روی عکس های خود در سایت متن بگذارید . این یکی از کاربردی ترین و مهم ترین کدهایی است که من با استفاده از آن سایت وردپرسی خود را بسیار زیبا تر و جالب تر کردم . اگر میخواهید نحوه ی استفاده از این کد را بدانید با این قسمت از آموزش قرار دادن متن روی عکس با کد در html ، ما را تا پایان این مطلب همراهی کنید .
گذاشتن متن روی عکس های سایت وردپرسی
در ادامه ی مطلب خودم میخوام چگونگی استفاده و کاربرد این افزونه را به شما توضیح و آموزش بدم . شما با استفاده از این کد بسیار ساده میتوانید در کد های html خود ، بر روی عکس های سایت متن قرار دهید ، همانگونه که خودتان بخواهید با اندازه و فونت مورد علاقه ی شما .
چگونگی استفاده از کد قرار دادن متن بر روی عکس
- از text-align برای مشخص کردن محل قرار گرفتن متن روی تصویر
- از color برای مشخص کردن رنگ متن ( رنگ مشکی = ۲c3e50 # , رنگ سفید = ecf0f1 # , رنگ آبی = ۱۷۸۴d9 # , رنگ قرمز = ff5959 # , رنگ زرد = f1c40f # )
- از background-image برای فراخوانی تصویر که به جای اسم image.jpg شما میتوانید آدرس مورد نظر خود را روی تصویر قرار دهید
- از width برای تعیین عرض عکس که بر حسب پیکسل محاسبه میشود
- از height برای ارتفاع تصویر استفاده میشود
- و در قسمت آخر شما به جای ( متن شما ) میتوانید متن مورد نظر خود را بنویسید
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
|
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
.onvan{
text-align:center;
line-height: ۱۳;
color:#FFFFFF;
background-image:url(‘image.jpg’);
width:۲۱۲px;
height:۲۰۰px;
}
</style>
</head>
<body>
<div class=“onvan”> متن شما </div>
</body>
</html>
|
امیدوارم از آموزش قرار دادن متن روی عکس با کد در html لذت برده باشید .