در اوایل سال جاری، WebKit رفتار ویژگی کوتاهنویسی background
CSS را بهروزرسانی کرد. با این تغییر، ویژگی background
کوتاهنویسی background-size
به مقدار پیشفرض auto auto
بازنشانی میکند، اگر در اعلان کوتاهنویسی تنظیم نشده باشد. این تغییر کروم و سایر مرورگرهای WebKit را با مشخصات مطابقت میدهد و با رفتار فایرفاکس، اپرا و اینترنت اکسپلورر مطابقت دارد.
با توجه به اینکه Chrome for Android به سمت ویرایشهای فعلی در WebKit پیش میرود، این تغییر اکنون در Android در حال اجراست. از آنجایی که این یک راه حل برای وب کیت بود، سایت هایی که در چندین مرورگر آزمایش شده اند احتمالاً تحت تأثیر قرار نمی گیرند.
روش قدیمی انجام کارها
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
ویژگی کوتاهنویسی background
حاوی هیچ ویژگی اندازه نیست و بنابراین background-size
را به مقدار پیشفرض auto auto
بازنشانی میکند.
روش صحیح تعیین اندازه تصویر
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
در fooB
، تعیین یک background-size
در کوتاهنویسی background
مستلزم آن است که ابتدا position
(0%) مشخص شود، سپس یک اسلش به جلو و سپس background-size
(50px 40px) مشخص شود.
رفع کدهای موجود
چندین گزینه وجود دارد که یک راه حل آسان برای این موضوع ارائه می دهد:
- به جای خاصیت اختصار
background
ازbackground-image
استفاده کنید. -
background-size
در آخر تنظیم کنید، با ویژگی بالاتر از هر قانون CSS دیگری کهbackground
آن عنصر را تنظیم میکند، و فراموش نکنید که قوانین را بررسی کنید و:hover
. - ویژگی
!important
را درbackground-size
اعمال کنید. - اطلاعات اندازه را به خاصیت کوتاه نویسی
background
منتقل کنید.
پاداش: تغییر تصویر پس زمینه
علاوه بر این تغییر، اکنون انعطاف پذیری بیشتری در قرار دادن تصویر در پس زمینه وجود دارد. در گذشته، موقعیت تصویر را فقط میتوانستید از گوشه سمت چپ بالا مشخص کنید، اکنون میتوانید یک افست را از لبههای ظرف مشخص کنید. به عنوان مثال تنظیم background-position: right 5px bottom 5px;
تصویر 5 پیکسل از لبه سمت راست و 5 پیکسل از پایین قرار می گیرد. این نمونه را در JSBin بررسی کنید