قرار دادن متن روی عکس با کد در HTML

2,519 بازدید
بدون نظر

قرار دادن متن روی عکس با کد در html

با سلام خدمت دوستان همیشگی . کدی که در این مطلب می خواهیم به شما معرفی کنیم به شما این امکان را می دهد تا بتوانید روی عکس های خود در سایت متن بنویسید، و یکی از کدهای مهم برای بهتر کردن ظاهر سایت است. برای یادگیری روش استفاده از این کد در ادامه با ما همراه باشید.

ایجاد متن روی عکس های سایت وردپرسی

کدی که در این مطلب به شما معرفی می شود به شما کمک می کند به سادگی در کد های html خود، بر روی عکس های سایت طبق سلیقه و با اندازه و فونت دلخواهتان متن بنویسید.

نحوه ی استفاده از کد قرار دادن متن بر روی عکس

از text-align برای تعیین محل متن روی تصویر

از color برای تعیین رنگ متن ( رنگ مشکی = ۲c3e50 # , رنگ سفید = ecf0f1 # , رنگ آبی = ۱۷۸۴d9 # , رنگ قرمز =ff5959 # , رنگ زرد = f1c40ff # )

از background-image برای فراخوانی تصویر که به جای اسم image.jpg شما میتوانید آدرس مورد نظر خود را روی تصویر قرار دهید

از width برای مشخص کردن عرض عکس که بر حسب پیکسل می باشد

از height برای ارتفاع تصویر بکار می رود

و در آخرین قسمت شما به جای ( متن شما ) متن مورد نظر خود را بنویسید.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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>

امیدوارم از این آموزش لذت برده باشید.

درباره نویسنده : پیش‌فرض سایت

To live a creative life, we must lose our fear of being wrong

مطالب بیشتر از همین نویسنده

قرار دادن متن روی عکس با کد در HTML