زمینه های چندگانه CSS
CSS به شما امکان می دهد از طریق background-image
ویژگی ، چندین تصویر پس زمینه را برای یک عنصر اضافه کنید .
تصاویر پس زمینه مختلف با ویرگول از هم جدا می شوند ، و تصاویر روی هم قرار می گیرند ، جایی که تصویر اول نزدیک ترین به بیننده است.
مثال زیر دارای دو تصویر پس زمینه است ، تصویر اول یک گل است (تراز شده در پایین و راست) و تصویر دوم یک پس زمینه کاغذی است (تراز شده در گوشه بالا سمت چپ):
مثال
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
چندین تصویر پس زمینه را می توان با استفاده از خصوصیات پس زمینه جداگانه (همانطور که در بالا مشاهده شد) یا background
ویژگی مختصر.
مثال زیر از background
ویژگی مختصر استفاده می کند (همان نتیجه ای که در مثال بالا وجود دارد):
مثال
#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }
اندازه پس زمینه CSS
background-size
ویژگی CSS به شما امکان می دهد اندازه تصاویر پس زمینه را تعیین کنید.
اندازه را می توان در طول ، درصد یا با استفاده از یکی از دو کلمه کلیدی مشخص کرد: حاوی یا پوشش.
اندازه زیر تصویر پس زمینه را بسیار کوچکتر از تصویر اصلی می کند (با استفاده از پیکسل):
این کد است:
مثال
#div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; }
دو مقدار ممکن دیگر برای background-size
عبارتند از: contain
و cover
.
contain
کلمه کلیدی ترازو تصویر پس زمینه به عنوان بزرگ به عنوان امکان پذیر است (اما هر دو عرض و ارتفاع آن باید در داخل منطقه، محتوای مناسب). به همین ترتیب ، بسته به نسبت تصویر پس زمینه و منطقه موقعیت موقعیت ، ممکن است مناطقی از پس زمینه وجود داشته باشد که توسط تصویر پس زمینه پوشانده نشده است.
cover
مقیاس کلمه کلیدی تصویر پس زمینه به طوری که منطقه محتوا به طور کامل توسط تصویر پس زمینه پوشش داده (هر دو عرض و ارتفاع آن برابر یا بیش منطقه محتوا). به همین ترتیب ، برخی از قسمتهای تصویر پس زمینه ممکن است در منطقه موقعیت پس زمینه قابل مشاهده نباشد.
مثال زیر استفاده از contain
و cover
:
مثال
#div1 { background: url(img_flower.jpg); background-size: contain; background-repeat: no-repeat; } #div2 { background: url(img_flower.jpg); background-size: cover; background-repeat: no-repeat; }
اندازه تصاویر چند پس زمینه را تعریف کنید
این background-size
ویژگی همچنین مقادیر مختلفی را برای اندازه پس زمینه (با استفاده از یک لیست جدا شده با کاما) ، هنگام کار با چندین پس زمینه ، می پذیرد.
مثال زیر دارای سه تصویر پس زمینه است که برای هر تصویر دارای اندازه مختلف اندازه پس زمینه هستند:
مثال
#example1 { background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; background-size: 50px, 130px, auto; }
تصویر پس زمینه با اندازه کامل
اکنون می خواهیم در وب سایتی یک تصویر پس زمینه داشته باشیم که تمام پنجره مرورگر را همیشه پوشش دهد.
الزامات به شرح زیر است:
- کل صفحه را با تصویر پر کنید (فضای سفید وجود ندارد)
- مقیاس تصویر را در صورت لزوم
- مرکز تصویر در صفحه
- باعث ایجاد نوارهای پیمایشی نشوید
مثال زیر نحوه انجام آن را نشان می دهد. از عنصر <html> استفاده کنید (عنصر <html> حداقل حداقل ارتفاع پنجره مرورگر است). سپس روی آن یک پس زمینه ثابت و مرکزیت تنظیم کنید. سپس اندازه آن را با خاصیت background-size تنظیم کنید:
مثال
html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; }
تصویر قهرمان
همچنین می توانید از ویژگی های پس زمینه مختلف در <div> برای ایجاد یک تصویر قهرمان (یک تصویر بزرگ با متن) استفاده کنید و آن را در جایی که می خواهید قرار دهید.
مثال
.hero-image { background: url(img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; }
ویژگی CSS پس زمینه
background-origin
خاصیت CSS محل قرارگیری تصویر پس زمینه را مشخص می کند.
این ویژگی سه مقدار مختلف را در بر می گیرد:
- border-box – تصویر پس زمینه از گوشه بالا سمت چپ حاشیه شروع می شود
- padding-box – (پیش فرض) تصویر پس زمینه از گوشه بالا سمت چپ لبه بالشتک شروع می شود
- جعبه محتوا – تصویر پس زمینه از گوشه بالا سمت چپ محتوا شروع می شود
مثال زیر background-origin
ویژگی را نشان می دهد :
مثال
#example1 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; background-origin: content-box; }
خاصیت کلیپ پس زمینه CSS
background-clip
خاصیت CSS منطقه نقاشی پس زمینه را مشخص می کند.
این ویژگی سه مقدار مختلف را در بر می گیرد:
- border-box – (پیش فرض) پس زمینه در لبه خارجی حاشیه نقاشی شده است
- padding-box – پس زمینه به لبه خارجی بالشتک نقاشی شده است
- جعبه محتوا – پس زمینه در جعبه محتوا نقاشی شده است
مثال زیر background-clip
ویژگی را نشان می دهد :
مثال
#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }