در این بخش از آموزش طراحی سایت به آموزش تعیین رنگ یا تصویر برای پس زمینه عناصر HTML می پردازیم.
مشخصه های CSS background برای تعریف کردن یک رنگ یا تصویر برای پس زمینه ی عناصر HTML استفاده می شوند.
شما با استفاده از این مشخصه خیلی راحت می توانید در پس زمینه ی عناصر تصویر و یا یک رنگ دلخواه را قرار دهید.
در این بخش ما با مشخصه های زیر آشنا خواهید شد:
- background-color (رنگ پس زمینه)
- background-image (تصویر پس زمینه)
- background-repeat (تکرار تصویر پس زمینه)
- background-attachment (حرکت کردن یا ثابت ماندن تصویر پس زمینه)
- background-position (موقعیت تصویر پس زمینه)
CSS background-color (رنگ پس زمینه)
با استفاده از این مشخصه می توانید رنگ دلخواه خود را برای پس زمینه یک عنصر HTML درنظر بگیرید. مثال زیر نحوه انجام این کار را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
در زبان CSS، معمولا با استفاده از 3 روش زیر یک رنگ تعیین می شود:
- استفاده از یک نام رنگ معتبر - مانند "Red"
- استفاده از یک مقدار Hex - مانند "#ff0000"
- استفاده از یک مقدار rgb - مانند "rgb(255,0,0)"
تعیین رنگ برای بقیه ی عناصر HTML
شما می توانید با استفاده از کدام از روش های بالا رنگ پس زمینه ی هر عنصر HTML را تعیین کنید. در مثال زیر رنگ پس زمینه تگ های h1، div و p تغییر کرده اند.
خروجی مثال بالا به شکل زیر است:
Opacity / Transparency (تعیین میزان شفافیت عناصر HTML)
مشخصه ی opacity میزان شفافیت یک عنصر HTML را تعیین می کند. این مشخصه می تواند یک مقدار بین 0.0 و 1.0 داشته باشد. هر چه مقدار این مشخصه کمتر باشد، شفافیت عنصر بیشتر است و عنصر به سمت محو شدن پیمایش می کند.
برای انجام این کار باید از دستور opacity به شکل زیر استفاده کنید.
شفافیت با استفاده از RGBA
اگر می خواهید شفافیت را تنها به عنصرهای فرزند اعمال کنید، از مقادیر RGBA استفاده کنید. مثال زیر فقط شفافیت را برای تصویر پس زمینه اعمال می کند و روی محتویات آن اعمال نمی گردد.
CSS Background Image (تصویر پس زمینه)
مشخصه ی Background Image یک تصویر را به عنوان تصویر پس زمینه ی یک عنصر قرار می دهد. بصورت پیش اگر اندازه تصویر کوچکتر از اندازه عنصر موردنظر باشد، تصویر چندبار تکرار شده تا تمام فضای عنصر را پوشش دهد.
خروجی مثال بالا به شکل زیر است:
و به عنوان یک مثال دیگر:
خروجی مثال بالا به شکل زیر است:
CSS Background Repeat (تکرار تصویر)
بصورت پیش فرض، مشخصه ی background-image هم بصورت عمودی و هم بصورت افقی تصویر را تکرار می کند. برای جلوگیری از این کار می توانید از مشخصه background-repeat استفاده کنید. زمانی که مقدار background-repeat را برابر با مقدار no-repeat قرار می دهید، تکرار تصویر صورت نمی گیرد و تنها یکبار تصویر در پس زمینه قرار می گیرد.
در مثال زیر از ویژگی background-repeat برای جلوگیری از تکرار تصویر استفاده شده است:
خروجی مثال بالا به شکل زیر است:
خب همانطور که می بینید، تصویر پس زمینه دقیقا جایی قرار داده شده است که متن قرار داده شده است. بنابراین ما قصد داریم که موقعیت تصویر را تغییر دهیم تا متن قابل خواندن باشد.
background-position (موقعیت تصویر پس زمینه)
مشخصه background-position برای مشخص کردن موقعیت تصویر پس زمینه به کار می رود. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است. همانطور که می بینید تصویر به سمت راست منتقل شده تا متن خوانایی بالاتری داشته باشد.
CSS Background Attachment (حرکت کردن یا ثابت ماندن تصویر پس زمینه)
مشخصه ی background-attachment مشخص می کند که آیا تصویر پس زمینه باید با بقیه ی عناصر صفحه اسکرول شود یا ثابت بماند.
با استفاده از مقدار fixed برای مشخصه background-attachment می توانید تصویر پس زمینه را هنگام اسکرول صفحه ثابت نگه دارید.
و با استفاده از مقدار scroll برای مشخصه background-attachment می توانید مشخص کنید که تصویر پس زمینه هنگام اسکرول صفحه حرکت کند.
CSS Background Shorthand
به منظور کوتاه کردن کد، شما می توانید تمام مشخصه های پس زمینه را در یک مشخصه قرار دهید. این مشخصه shorthand نام دارد.
بنابرای شما می توانید به جای نوشتن دستورات زیر:
از shorthand property background به شکل زیر استفاده کنید:
هنگام استفاده از shorthand property ترتیب مقادیر مشخصه ها بصورت زیر می باشد:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
تا زمانی که بقیه ی مقادیر مشخصه background به ترتیب باشند، مهم نیست که یک مقدار مشخصه وجود نداشته باشد. به خاطر داشته باشید که ما از مشخصه ی background-attachment در مثال بالا استفاده نمی کنیم زیرا مقداری ندارد.
