این آموزش در تاریخ ۱۴۰۰/۱۰/۲۷ آپدیت شده است.
آموزش ویژگی background-origin در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-origin در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی background-origin در CSS
با استفاده از ویژگی background-origin در CSS میتوان مشخص کرد که موقعیت یا نقطه شروع تصویر زمینه در یک عنصر به چه صورت باشد.
اگر شما از ویژگی background-attachment استفاده کرده باشید، ویژگی background-origin عمل نخواهد کرد.
این ویژگی در ظاهر ممکن است شبیه ویژگی background-clip باشد، ولی فرق دارند، ویژگی background-clip میزان گستردگی یا پخش شدن تصویر / رنگ زمینه را مشخص میکند ولی ویژگی background-origin موقعیت یا نقطه شروع تصویر / رنگ زمینه را مشخص میکند.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی background-origin را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ۳ مقدار این ویژگی
|
1 2 3 4 5 |
.free-learn-1{ background-image: url("files/bg5.jpg"); background-repeat: no-repeat; background-origin: border-box; } |
Free-Learn
جدول مشخصات ویژگی background-origin در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | padding-box |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.backgroundOrigin=”content-box”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-origin در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| background-origin | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
background-origin: padding-box|border-box|content-box|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی background-origin در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| padding-box | پیش فرض – تصویر یا رنگ زمینه از لبه داخلی ( Padding ) عنصر شروع میشود |
| border-box | تصویر یا رنگ زمینه از لبه خارجی ( مرز ) عنصر شروع میشود |
| content-box | تصویر یا رنگ زمینه از محدوده باکس متن شروع میشود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- اگر از ویژگی background-attachment استفاده کرده باشید، ویژگی background-origin عمل نخواهد کرد.
