آموزش برنامه نویسی و مهارتهای وب
یکشنبه ۳۰ اردیبهشت ۱۴۰۳
Sunday, May 19, 2024 GMT +3:30
Sunday, May 19, 2024 GMT +3:30
خاصیت Background و ویژگی های آن در CSS
بعد از آشنایی اولیه با CSS، تعریف کلاس (Class) و آی دی (ID)، نوبت به فراگیری ویژگی های مربوط به خاصیت Background در این زبان است، Background از جمله اولین خاصیت هایی است که در هنگام طراحی صفحات وب از آن استفاده می کنیم چرا که می تواند نقطه شروع طراحی ظاهر رابط کاربری ما باشد و به نوعی رنگ بندی پایه پروژه را مشخص کند، خوشبختانه قابلیت های CSS در این خصوص تقریبا کامل و بدون نقص است و هرآنچه که در طراحی وب مورد انتظار ما باشد با کدهای آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانیم پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های background-color ،background-image ،background-repeat ،background-attachment ،background-position و... به زیبایی شکل داده و از آنها به طور سفارشی استفاده کنیم.
خاصیت Background در یک نگاه
خاصیت Background شامل ویژگی هایی است که همگی یک هدف مشترک را دنبال می کنند و آن هم تنظیم پس زمینه صفحه یا عناصر وب به نحو دلخواه است، به طور مثال اگر بخواهیم تصویر پس زمینه مد نظرمان صرفا محور X ها را پوشش دهد ویژگی تحت عنوان background-repeat وجود دارد که می توانیم مقدار آن را به صورت repeat-x تنظیم کنیم، قاعدتا این مقادیر قراردادی و از پیش تعریف شده هستند که در ادامه در خصوص نحوه کاربرد آنها بیشتر توضیح خواهیم داد، برای داشتن دورنمای کلی از خاصیت Background و ویژگی های آن نمونه کد زیر را بررسی می کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | شیوه کلی نگارش ویژگی های Background در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
background:#099 url('background.gif');
/*background-image:url('background.gif');*/
background-attachment:fixed;
background-color:#C69;
background-position:top;
background-repeat:repeat-x;
}
.rtl{
direction:rtl;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="rtl">
پس زمینه این صفحه در قسمت بالا از تکرار تصویر کوچکی در راستای محور X ها ایجاد شده است (ویژگی background-repeat)، رنگ پس زمینه کل صفحه نیز با مقدار کد هگز C69 در ویژگی background-color تنظیم شده که تگ body یعنی کل صفحه را پوشش می دهد.
<br>
نکته: هرچند مقدار کد هگز 099 در ویژگی background به عنوان رنگ پس زمینه در نظر گرفته شده، اما در ادامه کلاس، مقدار رنگ C69 در ویژگی background-color جایگزین آن شده که در این حالت به دلیل تداخل دو ویژگی یکسان، صرفا مقدار آخر بر اساس قوانین اولویت در CSS غالب می شود.
</p>
</body>
</html>- در کد بالا در صفحه وبی فرضی از خاصیت background و برخی ویژگی های آن استفاده کرده ایم، به غیر از موارد استفاده شده در مثال بالا، ویژگی های background-size، background-clip و background-origin نیز بر حسب موقعیت و نیاز قابل استفاده هستند که در ادامه در خصوص آنها بیشتر خواهیم گفت.
- در قسمت مربوط به آدرس دهی تصویر پس زمینه می توان از ویژگی background به صورت کلی (شامل رنگ و آدرس تصویر) یا background-image به صورت جزئی تر (صرفا شامل آدرس تصویر) استفاده کرد.
background:#099 url('background.gif');
/*background-image:url('background.gif');*/- در قسمت مربوط به پارامتر url باید آدرس تصویر را قرار دهیم، این آدرس با توجه به محل قرارگیری فایل می تواند به صورت نسبی یا مطلق باشد.
مثال برای حالت نسبی:
background-image:url('background.gif');background-image:url('https://webgoo.ir/example/css/background.gif');- رنگ پس زمینه صفحه را با ویژگی background-color و یک مقدار کد هگز به صورت C69 و درج علامت # در ابتدا تنظیم کرده ایم، هگز یک استاندارد رنگی است که در آن هر کد نشانگر یک رنگ بخصوص است، معمولا برای تعیین رنگ در CSS از کدهای هگز با مقادیر عدد و حروف یا استاندارد RGB با مقادیر عددی استفاده می کنند، این کدها و عددها را می توانیم از طریق بخش مربوط به رنگ ها در برنامه های کدنویسی، برنامه های گرافیکی یا ابزارهای تحت وب پیدا کنیم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه یا در عنصر هدف (به فرض تگ div) مشخص می کند.
- background-repeat مشخص می کند که نحوه تکرار تصویر پس زمینه در صفحه یا در عنصر هدف به چه شکل باشد.
در ادامه به بررسی جزئی تر هر یک از ویژگی های فوق می پردازیم.
ویژگی background
این ویژگی می تواند مقادیر رنگی (کد هگز یا RGB) یا آدرس یک تصویر (نسبی یا مطلق) و یا هر دو مقدار را در خود داشته باشد.
.my-div{
background:#C69;
}.my-div{
background:url('image/imagebackground.png');
}.my-div{
background:#093 url('image/imagebackground.png');
}ویژگی background-color
در این ویژگی مشابه background رنگ مد نظر را به صورت کد HEX یا RGB درج می کنیم و به این صورت رنگ پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی رنگ پس زمینه آن بلاک را شکل دهد.
.my-div{
background-color:#093;
}.my-div{
background-color:rgb(150, 100, 200);
}ویژگی background-image
در این ویژگی مشابه background آدرس تصویر را به صورت نسبی یا مطلق در قسمت url درج می کنیم و به این صورت تصویر پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی تصویر پس زمینه آن بلاک را شکل دهد.
.my-div{
background-image:url('upload/images/bg-image.jpg');
}نکته: در حالت نسبی با توجه به محل قرارگیری فایل تصویر و صفحه وبی که ویژگی background-image در آن به کار می رود آدرس دهی مشخص می شود، به فرض اگر صفحه وب و فایل تصویر هر دو در یک دایرکتوری باشند کافی است در قسمت url نام فایل تصویر با پسوند را درج کنیم (به فرض bg-image.jpg) یا اگر صفحه وب در دایرکتوری اصلی سایت و فایل تصویر در دایرکتوری upload/images باشد، آدرس نسبی تصویر upload/images/bg-image.jpg خواهد بود، در حالت مطلق آدرس کامل تصویر در وب را درج می کنیم یعنی همان آدرسی که اگر در مرورگر درج کنیم فایل تصویر دانلود خواهد شد، حالت مطلق بیشتر برای مواقعی است که فایل تصویر از یک سایت دیگر در صفحه وبمان بارگذاری می شود یا اینکه بخواهیم به هر دلیل فایل ها به صورت مطلق آدرسی دهی شوند (به فرض برای رعایت کپی رایت یا در موارد ضرورت های برنامه نویسی و...)، در مثال بالا آدرس تصویر به صورت دایرکتوری (نسبی) درج شده است.
ویژگی background-attachment
ویژگی background-attachment برای این منظور است که رفتار مرورگر در خصوص ثبات یا عدم ثبات پس زمینه به هنگام اسکرول صفحه را تعیین کنیم، اگر مقادیر این ویژگی fixed باشد در صفحاتی که ارتفاع آنها از ارتفاع صفحه نمایش کاربر بیشتر است نوار اسکرول کناری (عمودی) نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه اسکرول کند تصویر پس زمینه در جای خود بدون تغییر و ثابت باقی می ماند، این تکنیکی است که در طراحی برخی از قالب های وب مشاهده می شود.
body{
background-attachment:fixed;
}ویژگی background-position
ویژگی background-position موقعیت تصویر پس زمینه را در محلی که استفاده شده مشخص می کند، به فرض اگر بخواهیم تصویر خود را متمایل به سمت راست قرار دهیم باید از background-position با مقدار right استفاده کنیم.
.my-div{
background-position:right;
}
.my-div-2{
background-position:bottom left;
}ویژگی background-repeat
ویژگی background-repeat برای مشخص کردن نحوه تکرار تصویر پس زمینه (در مواقعی که تصویر کوچکتر از فضایی است که می خواهیم آن را پوشش دهد) به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این ویژگی و مقادیر آن استفاده می کنیم.
.my-div{
background-repeat:repeat-y;
}ویژگی background-size
ویژگی background-size قابلیت دیگری از خانواده ویژگی های مربوط به خاصیت Background است که می توانیم با استفاده از آن تنظیمات بیشتری بر روی اندازه تصویر پس زمینه و نحوه نمایش آن داشته باشیم، به فرض با در نظر گرفتن مقدار cover برای این ویژگی، پس زمینه کل صفحه را پوشش می دهد.
.my-div{
background-size:cover;
}- مقدار contain، پوشش کامل صفحه یا بلاک با تصویر پس زمینه، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد به تعداد لازم در جهت عمودی یا افقی تکرار خواهد شد (مگر اینکه در کنار ویژگی background-size ویژگی background-repeat را با مقادیر no-repeat تنظیم کنیم).
- مقدار cover، پوشش کامل صفحه یا بلاک با تصویر پس زمینه، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد، به اندازه مورد نیاز در جهت عمودی یا افقی کشیده خواهد شد.
- مقدار دهی درصدی یا پیکسلی، در این صورت تصویر پس زمینه بر همان مبنا تغییر اندازه داده، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد، به اندازه مورد نیاز در جهت عمودی یا افقی تکرار خواهد شد.
.my-div{
background-size:50%;
}.my-div{
background-size:100px 50px;
}ویژگی background-origin
ویژگی background-origin نقطه شروع نمایش و موقعیت تصویر پس زمینه ای که با ویژگی background یا background-image تنظیم شده را تعیین می کند و می تواند مقادیر border-box، padding-box و content-box داشته باشد (همچنین مقدار عمومی initial، inherit و unset) که هر کدام از این مقادیر در نحوه رفتار این ویژگی تاثیرگذار هستند، عبارت box در این مقادیر اشاره به مفهوم CSS Box Model دارد که به طور خلاصه یعنی هر عنصر HTML را می توان شبیه یک جعبه در نظر گرفت که می تواند چهار سطح داشته باشد:
1-margin
2-border
3-padding
4-content .my-div{
background-origin:border-box;
}نکته 2: اگر ویژگی background-attachment برابر مقدار fixed باشد ویژگی background-origin بی تاثیر خواهد شد.
ویژگی background-clip
ویژگی background-clip محدوده نمایش رنگ یا تصویر پس زمینه را مشخص می کند، این ویژگی می تواند مقادیر border-box، padding-box و content-box داشته باشد (همچنین مقدار عمومی initial، inherit و unset) که هر کدام از این مقادیر در نحوه رفتار این ویژگی بر اساس مفهوم CSS Box Model تاثیرگذار هستند.
.my-div{
background-clip:border-box;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از ویژگی های مختلف خاصیت Background در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
background:#666;
color:#FFF;
}
.my-div-1, .my-div-2, .my-div-3{
height:50px;
width:50%;
margin:12px auto auto auto;
border:12px solid rgba(23, 23, 23, 0.5);
}
.my-div-1{
background:#C28DD3 url('background.png');
background-size:contain;
}
.my-div-2{
background:#9187E4 url('background.png');
background-position:center left;
}
.my-div-3{
background:#AD393B url('background.png');
background-size:30%;
background-clip:padding-box;
}
.rtl{
direction:rtl;
}
</style>
</head>
<body>
<div class="my-div-1">
my-div-1
</div>
<div class="my-div-2">
my-div-2
</div>
<div class="my-div-3">
my-div-3
</div>
<hr>
<div class="rtl">
در بلاک های بالا از ویژگی های مختلف خاصیت Background استفاده شده که در هنگام طراحی رابط کاربری صفحات وب بر حسب موقعیت مورد نیازمان خواهند بود، برای درک بهتر نحوه رفتار متفاوت این ویژگی ها کافی است صفحه وبی فرضی داشته باشیم و ویژگی ها را با مقادیر مختلف به صورت آزمایش و خطا در آن امتحان کنیم.
</div>
</body>
</html>دسته بندی: آموزش مقدماتی » CSS
مطالب بیشتر:نحوه تنظیم لیست با تگ ul li در CSS
کاربرد خاصیت height و width در CSS
کاربرد ویژگی position و float در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
سلکتور آی دی (ID) و کلاس (Class) در CSS
دیدگاه
۳۰ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.۱۳:۰۷ ۱۳۹۱/۰۷/۰۵
میشه بگید که این کد ها رو چجوری یا با چه نرم افزاری می نویسند
با تسلط بر CSS و به کمک نرم افزارهایی مانند Aptana
http://www.aptana.com۰۲:۱۲ ۱۳۹۲/۰۴/۱۴
سلام. اگه بخوایم background سایت رو یه خورده دورش کنیم. الان خیلی جلو هستش انگار توی عکس زوم کرده.
باید چیکار کنم؟ البته فقط background دور بشه نه خوده سایت.
باید چیکار کنم؟ البته فقط background دور بشه نه خوده سایت.
به نظر باید فایل PSD لوگو یا پس زمینه را ویرایش و اندازه های ارتفاع و عرض را کاهش دهید
مصطفی
۱۷:۱۲ ۱۳۹۲/۰۷/۲۹
چطور میشه اگه یه عکسی رو به عنوان بکگراند تصویر با css قرار دادیم باز روی اون با css عکس معمولی قرار بدیم
برای این کار باید از لایه های تو در تو استفاده کنید، به فرض اگر برای یک تگ div پس زمینه تنظیم کنید، باید برای تنظیم مجدد آن برای رسیدن به هدف مورد نظر، یک تگ div دیگر، درون آن تعریف کنید و به آن نیز پس زمینه بدهید.
سعید
۱۵:۵۳ ۱۳۹۲/۰۹/۲۴
من میخوام از این سبک عکس ها را برای بک گروند استفاده کنم می خواستم ببینم اسم این نوع عکس ها چیه چون pattern هم نیستن. سایتی میدونین که این عکس ها رو برای دانلود داشته باشه؟ یا نرم افزار خاصی برا تولیدشون هست؟
http://upload7.ir/images/52778364969924989835.gifاین نوع تصاویر را المان های طراحی وب (Background Image) می گویند، تا آنجا که اطلاع داریم هیچ منبع استانداردی برای ارائه این نوع تصاویر وجود ندارد لذا
برای دریافت آنها باید در وب (در سایت های گرافیکی) جستجو کنید یا اینکه با نرم افزارهای گرافیکی (مانند فتوشاپ) موارد مد نظرتان را بسازید (به نظر کار وقت گیری خواهد بود!).
برای دریافت آنها باید در وب (در سایت های گرافیکی) جستجو کنید یا اینکه با نرم افزارهای گرافیکی (مانند فتوشاپ) موارد مد نظرتان را بسازید (به نظر کار وقت گیری خواهد بود!).
محسن
۰۴:۰۵ ۱۳۹۲/۱۱/۰۸
ممنون از سایت خوبتون
من برای اینکه عکس بکگراند سایتم با تمام مانیتورها سازگار بشه background-size رو بصورت درصدی 100 درصد وارد کردم و کنارش هم از backgroun-attachment:fixed استفاده کردم که عکس کامل طول و عرض صفحه رو پوشش بده ولی مشکلی که دارم اینه که وقتی اندازه ی مرورگر رو کوچک کنم عکس بکگراند هم کوچک میشه و عناصر صفحه بهم میریزن چطور میتونم این مشکل رو حل کنم یا اینکه راه دیگه ی وجود داره واسه سازگاری اندازه ی بکگراند با مانیتورای مختلف
من برای اینکه عکس بکگراند سایتم با تمام مانیتورها سازگار بشه background-size رو بصورت درصدی 100 درصد وارد کردم و کنارش هم از backgroun-attachment:fixed استفاده کردم که عکس کامل طول و عرض صفحه رو پوشش بده ولی مشکلی که دارم اینه که وقتی اندازه ی مرورگر رو کوچک کنم عکس بکگراند هم کوچک میشه و عناصر صفحه بهم میریزن چطور میتونم این مشکل رو حل کنم یا اینکه راه دیگه ی وجود داره واسه سازگاری اندازه ی بکگراند با مانیتورای مختلف
در وب استاندارد خاصی برای اندازه تصویر پس زمینه وجود ندارد، از آنجایی که اندازه صفحه نمایش های مختلف متفاوت است، طراحان معمولا استاندارد مانیتورهای CRT (قدیمی) و LED (عریض) را انتخاب می کنند، یعنی طوری عکس پس زمینه را تنظیم می کنند که در مانیتورهای 17 اینچ تا حدودی و در مانیتورهای عریض به طور کامل دیده شود، البته امروزه اکثر سایت های حرفه ای یا از رنگ برای پس زمینه استفاده می کنند یا از تکرار تصاویر پیکسلی با همپوشانی.
amir
۱۴:۴۶ ۱۳۹۳/۰۱/۱۵
حرف ندارید اما تو رو خدا یکم بهتر و مفهومی تر توضیح بدید
برخی مباحث نیاز به داشتن اطلاعات پایه و مقدماتی دارند، واقعا قابل ساده تر سازی از این بیشتر نیستند!
مژگان
۲۱:۳۷ ۱۳۹۳/۰۴/۰۲
من میخوام پیج سایت بینگ رو طراحی کنم عکسی رو برای بک گروند گذاشتم اما در صفحه اسکرول عمودی و افقی دارم که این در واقع نباید باشه. ابعاد عکس رو با فتوشاپ کوچکتر کردم اما بازم تغییری نکرد میاد همون عکس کوچک رو میکشه تو کل صفحه که فقط باعث بی کیفیتی عکس شد. چکار کنم که اسکرول نداشته باشه؟
همین طور اگه شما bing.com برین و ببینین فوتر هم داره من اومدم از تگ فوتر استفاده کردم دایو اضافی تعریف نکردم براش اما این فوتر کمی از حاشیه فاصله داره که در واقع نباید فاصله ای باشه برای هدر هم این فاصله بود که با margin صفر حلش کردم اما برای فوتر نمیشه . میشه راهنماییم کنین؟
همین طور اگه شما bing.com برین و ببینین فوتر هم داره من اومدم از تگ فوتر استفاده کردم دایو اضافی تعریف نکردم براش اما این فوتر کمی از حاشیه فاصله داره که در واقع نباید فاصله ای باشه برای هدر هم این فاصله بود که با margin صفر حلش کردم اما برای فوتر نمیشه . میشه راهنماییم کنین؟
برای حذف حاشیه های پیش فرض باید margin و padding تگ body را صفر تنظیم کنید:
body{
margin:0px;
padding:0px;
}Najme
۱۵:۱۸ ۱۳۹۳/۰۵/۱۵
سلام میخواستم یک عکس تو سایتم بزارم که این عکس وقتی موس میره روش عکس من رنگش تغیر میکنه یعنی کلا در حد 20px بالاتر از عکسم رو نشون بده کسی میدونه css مربوط به این رو؟؟؟؟؟؟؟؟
برای این کار بهتر است از جاوا اسکریپت یا پلاگین های جی کئوری استفاده کنید، با این حال نمونه کد CSS3 در این خصوص:
http://jsfiddle.net/27Syr/1206ELham
۲۲:۲۰ ۱۳۹۳/۰۶/۰۹
سلام. یه سوال: چرا وقتی من از کد
!doctype htmlمشکل شما ممکن است علت های مختلفی داشته باشد و بدون بررسی سورس صفحه امکان ارائه پاسخ نیست!
torang
۲۰:۳۴ ۱۳۹۳/۰۷/۲۵
عالی بود متشکر
مریم
۱۴:۳۴ ۱۳۹۳/۰۸/۰۷
سلام ممنون از مطالب مفید شما
من یک سوال دارم قالب سایتی که دارم طراحی می کنم در قسمتی از صفحه یک تصویر وجود دارد که منوهای من روی این تصویر می باشند من کدی بصورت زیر در css نوشته ام ولی منوهای من زیر عکس می آید نه روی عکس با اینکه در div های تو در تو آنرا نوشتم
من یک سوال دارم قالب سایتی که دارم طراحی می کنم در قسمتی از صفحه یک تصویر وجود دارد که منوهای من روی این تصویر می باشند من کدی بصورت زیر در css نوشته ام ولی منوهای من زیر عکس می آید نه روی عکس با اینکه در div های تو در تو آنرا نوشتم
<div id="all"> <!----BEGIN OF ALL---->
<!------Begin logo------>
<div id="logo">
<img src="image/logo.png" />
</div>
<!-----End of logo------>
<div id="background for menu">
<img src="image/background for menu.png"/>
<div id="menu"
<img src="image/menu.png"/>
</div>
</div>
</div><!----End of All---->برای اینگونه طراحی باید بر CSS و خاصیت هایی مانند position با مقادیر absolute و relative مسلط باشید، در این صورت می توانید یک بلاک والد (با مقادیر relative) داشته باشید و سایر عناصر را به صورت تابعی از آن و با مقادیر absolute تعریف کنید.
۱۲:۵۰ ۱۳۹۳/۰۸/۰۹
با عرض سلام و خسته نباشید و با تشکر از سایت مفیدتون.... من آشنایی خیلی کمی با css دارم و توی قالب وبلاگم که آدرسش رو وارد کردم میخواستم بک گراندم رو کاری کنم که با کوچک شدن سایز صفحه اونم کوچک بشه.... چیکار باید بکنم؟ تو html اگه ارتفاع و عرض رو به % وارد کنیم درست میشه اما در css زدم نشد... چیکار باید بکنم؟
ممنون میشم راهنمایی کنید چون همین مشکل باعث شده که قالبم تو گوشی و تبلت درست بالا نیاد و بهم ریخته باشه و منم تا قبل از اینکه متوجه این موضوع باشم فکر میکردم بخاطر همگام نبودن قالب با گوشی هست که اینجوری میشه و در آخر چون به نتیجه نرسیدم واسه وبلاگم نسخه موبایل زدم که اصلا دوستش ندارم....
ممنون میشم راهنمایی کنید چون همین مشکل باعث شده که قالبم تو گوشی و تبلت درست بالا نیاد و بهم ریخته باشه و منم تا قبل از اینکه متوجه این موضوع باشم فکر میکردم بخاطر همگام نبودن قالب با گوشی هست که اینجوری میشه و در آخر چون به نتیجه نرسیدم واسه وبلاگم نسخه موبایل زدم که اصلا دوستش ندارم....
body{margin:0;font-family: Tahoma;background:#000000;background:url(http://s5.picofile.com/file/8129622276/back4.jpg); }تصویر پس زمینه (تنظیم شده با CSS) به خودی خود هیچ نقشی در بهم ریختن قالب وبلاگ ندارد و صرفا ممکن است اندازه آن از صفحه نمایش بزگتر باشد که در این صورت بخشی از آن مخفی می شود، متاسفانه راه حل ساده ای برای رفع این مشکل (مخفی شدن تصویر پس زمینه در صفحه نمایش های کوچک) وجود ندارد، به همین دلیل در طراحی قالب های وب، کمتر از پس زمینه هایی به صورت تصویر ثابت استفاده می شود، راه حل استاندارد این است که قالبتان با پس زمینه های تکرار شونده (ناشی از تکرار و همپوشانی تصاویر خیلی کوچک در کنار هم) ایجاد شود یا اینکه نسخه موبایل داشته باشید.
نکته: در استایل نویسی حرفه ای CSS روش هایی وجود دارد که یک تصویر پس زمینه به ظاهر عریض از ترکیب چندین قسمت مختلف به وجود می آید، درک این شیوه نیازمند تجربه بالا در طراحی قالب و گرافیک وب است.
نکته: در استایل نویسی حرفه ای CSS روش هایی وجود دارد که یک تصویر پس زمینه به ظاهر عریض از ترکیب چندین قسمت مختلف به وجود می آید، درک این شیوه نیازمند تجربه بالا در طراحی قالب و گرافیک وب است.
صادق
۱۶:۰۹ ۱۳۹۴/۰۳/۰۶
سلام، من میخوام عکس بکگراند هم افقی و هم عمودی تکرار بشه. باید چیکار کنم؟
لطفا راهنمایی کنید. تشکر
لطفا راهنمایی کنید. تشکر
باید در قسمت استایل CSS خود برای ویژگی background-repeat از مقدار repeat استفاده کنید.
داوود
۲۰:۰۴ ۱۳۹۴/۰۳/۱۶
سلام آقای مهندس؛ در کدی که برای دوستمون Najme و به این آدرس گذاشتین:
این تکه از کد چیکار میکنه، چون با تغییر مقادیرش تو مرورگر فایرفاکس تغییری حاصل نشد در نمایش صفحه:
http://jsfiddle.net/27Syr/1206این تکه از کد چیکار میکنه، چون با تغییر مقادیرش تو مرورگر فایرفاکس تغییری حاصل نشد در نمایش صفحه:
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(500); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}- مثال ذکر شده برای کاربر مربوط به محتوای آموزشی موجود در سایت های دیگر است.
- تگ img به صورت پیش فرض در حالت inline-block پردازش می شود، مقدار block باعث می شود دو طرف عنصر پاک سازی شود (شبیه مقدار both برای خاصیت clear در CSS)، البته شاید در اینجا تاثیری نداشته باشد و صرفا سلیقه ای یا از باب عادت درج شده! اما اگر محتوا در کنار تصویر وجود داشته باشد، مقدار block باعث clear شدن دو طرف تصویر می شود.
- تنظیمات اضافه ای که درج شده اند برای سازگاری برخی ویژگی های جدید CSS با نسخه های قدیمی مرورگرها است.
- تگ img به صورت پیش فرض در حالت inline-block پردازش می شود، مقدار block باعث می شود دو طرف عنصر پاک سازی شود (شبیه مقدار both برای خاصیت clear در CSS)، البته شاید در اینجا تاثیری نداشته باشد و صرفا سلیقه ای یا از باب عادت درج شده! اما اگر محتوا در کنار تصویر وجود داشته باشد، مقدار block باعث clear شدن دو طرف تصویر می شود.
- تنظیمات اضافه ای که درج شده اند برای سازگاری برخی ویژگی های جدید CSS با نسخه های قدیمی مرورگرها است.
داوود
۰۸:۴۸ ۱۳۹۴/۰۳/۱۷
سلام آقای مهندس، صبحتون بخیر.
در خصوص background که درس امروزمون بود، برای نمونه من میخواستم header سایت p30download رو انجامش بدم. فقط زیرمنویی که حالت گرادیانت رو داره اومدم و بردمش تو فتوشاپ، و یه خوردش رو گرفتم که زیاد نشه؛ مسیر عکسی که ایجاد کردم رو تو این مسیر گذاشتم:
در خصوص background که درس امروزمون بود، برای نمونه من میخواستم header سایت p30download رو انجامش بدم. فقط زیرمنویی که حالت گرادیانت رو داره اومدم و بردمش تو فتوشاپ، و یه خوردش رو گرفتم که زیاد نشه؛ مسیر عکسی که ایجاد کردم رو تو این مسیر گذاشتم:
http://s3.picofile.com/file/8192408568/undermenu.pnghttp://www.cssdesk.com/2LkKB.undermenu{
background-image:url(http://s3.picofile.com/file/8192408568/undermenu.png);
background-repeat:repeat-x;
width:100%;
height:50px;
}
<div class="undermenu">
</div>استفاده از ویژگی های CSS بسته به نیاز و هدف ما است و به خودی خود هیچ اجباری به کاربرد یک ویژگی خاص وجود ندارد، اما از آنجایی که در طراحی قالب های کاربردی معمولا باید از ساختار بلاک های تو در تو استفاده کرد، بسته به شرایط ممکن است یک ویژگی نظیر clear استفاده شود که این به جهت تنظیم دقیق بلاک ها و تشکیل فرم مورد نظر ما ممکن است نیاز باشد، در کل طراحی وب را باید به تدریج و به همین سبک مورد به مورد فرا بگیرید تا در نهایت با کسب تجربه لازم بتوانید یک قالب حرفه ای (یعنی بتوانید ایده ذهنی را به راحتی به نتیجه HTML + CSS تبدیل کنید) طراحی کنید.
صفحه 1 از 2آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...۱۴۰۳/۰۲/۲۲
سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده ۱۴۰۳/۰۲/۲۱
سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون۱۴۰۳/۰۲/۱۹
سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...۱۴۰۳/۰۲/۱۹
پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...۱۴۰۳/۰۲/۱۸
پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...۱۴۰۳/۰۲/۱۶
vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...۱۴۰۳/۰۲/۰۵
vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...۱۴۰۳/۰۲/۰۴
پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...۱۴۰۳/۰۲/۰۲
هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟ ۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...۱۴۰۳/۰۱/۲۰
پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...۱۴۰۳/۰۱/۱۹
حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...۱۴۰۳/۰۱/۱۹
شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...۱۴۰۳/۰۱/۱۵
فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...۱۴۰۳/۰۱/۱۰
فرهادی
با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...۱۴۰۳/۰۱/۰۹
سید صالح
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...۱۴۰۳/۰۱/۰۷
فرهادی
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...۱۴۰۳/۰۱/۰۶
فرهادی
با سلام و درود سال نو رو بهتون تبریک میگم یه سوال من میخوام لینکهای داخل صفحه sitemap.xml سایتها رو دربیارم کدش رو هم...۱۴۰۳/۰۱/۰۲
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.