دوستان خواهش می کنم جواب بدید!!!!!

[L E N A]

سلام
فرض کنید من یه عکس دارم که میخوام نقش یه textfield رو داشته باشه، یه جور طراحی گرافیکی برای فرم لاگین!
چطور میتونم اون textfield رو در پس این تصویر گرافیکی قرار دم که دیده نشه ولی وجود داشته باشه؟

عکس فرم لاگین:

108361

[H:Shojaei]

سلام
بايد استايل بهش بديد يعني:

style="background-image:url('/img/image.jpg');"
البته بايد هر كدوم از اين عكسها رو جدا كنيد و واسه يكي از تكستهاتون بذاريد. در كل يكي از تكستهاتون اين طوري ميشه:

<input style="background-image:url('/img/image.jpg');" type="text" maxlength="100" value=""/>

[tadayoni]

اینم کد نمونه این فرم تقدیم به شما
http://tadayoni.persiangig.com/other/login_form.zip

در صورتی که امکان دانلود به دلیل وجود مشکلات در سرور persiangig برای شما وجود نداشت با پیغام خصوصی ایمیل خودتون رو ارسال کنید تا براتون بفرستم

[L E N A]

دوستان ممنون از لطفتون من برای تکست ها background-image گذاشتم ولی چون عکس سایزش از اون بزرگتره ببینین به چه روزی در اومد!!
تازه من الان کد جناب tadayoni (http://barnamenevis.org/member.php?284902-tadayoni) رو کپی کرده بودم!
108415

فقط user ـه درست شد!
یه مشکل دیگه هم که هست اینه که گوشه های تکست زاویه دار و مربعی هستن و گوشه های طرح من منحنی!
البته ماله شما رو نگاه کردم این مشکلو نداشت tadayoni (http://barnamenevis.org/member.php?284902-tadayoni) !!

[tadayoni]

تصاویر رو از فایلی که برای شما فرستادم وردارید
تصاویر شما از resolution یا اندازه بالاتری برخوردارن
من هر 3 تصویر رو برای شما برش دادم و توی فایل zip فرستادم
البته فکر کنم اگه background-size رو برابر 100٪ قرار بدید مشکل حل بشه ولی بهتره اندازه تصاویر استاندارد باشه

در مورد گر کردن گوشه ها هم میتونید کد زیر رو به هر سه کلاس اضافه کنید :

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;

[L E N A]

با اضافه کردن background-size=100% که هیچ اتفاقی نیفتاد!
اون کدهایی که برای گرد کردن گوشه ها دادید هم جواب نمیده! css3 هستن؟

در مورد عکسام، یعنی تنها راه همینه که اینقد تو فوتوشاپ سایز عکس رو تغییر بدی که به تکست باکست خوره؟!

[H:Shojaei]

بايد اين طوري بنويسيد:
background-size:100% 100%;
بردر رو هم نبايد مشكالي داشته باشه در كل بايد اينطوري بنويسيد:

<input style="background-image:url('/img/loading.gif'); background-size:100% 100%; border-radius:5px;" type="text" maxlength="100" value=""/>

[tadayoni]

با اضافه کردن background-size=100% که هیچ اتفاقی نیفتاد!
اون کدهایی که برای گرد کردن گوشه ها دادید هم جواب نمیده! css3 هستن؟

در مورد عکسام، یعنی تنها راه همینه که اینقد تو فوتوشاپ سایز عکس رو تغییر بدی که به تکست باکست خوره؟!

دستور مربوط به پس زمینه رو باید اینطور وارد کنید :
background-size:100% 100%;



بله . دستورات مربوط به گرد کردن گوشه ها css3 هستش که اندازه اونها رو من 5px دادم که میتونید کم یا زیاد کنید .

[tadayoni]

بايد اين طوري بنويسيد:
background-size:100% 100%;
بردر رو هم نبايد مشكالي داشته باشه در كل بايد اينطوري بنويسيد:

<input style="background-image:url('/img/loading.gif'); background-size:100% 100%; border-radius:5px;" type="text" maxlength="100" value=""/>


دستور border-radius رو بهتره با پیشوند های مربوط به مرورگرهای مختلف وارد کنیم تا توی همه اونها کار بکنه . border-radius خالی رو ممکنه برخی از نسخه های مرورگرهای مختلف نتونند اجرا کنند

[L E N A]

دوستان میبخشید ولی %100 %100 هم جواب نداد!
در مورد radius، میشه بگید "با پیشوند های مربوط به مرورگرهای مختلف وارد کنیم" یعنی چی؟ چطوری؟!
ممنون

[H:Shojaei]

دستور border-radius رو بهتره با پیشوند های مربوط به مرورگرهای مختلف وارد کنیم تا توی همه اونها کار بکنه . border-radius خالی رو ممکنه برخی از نسخه های مرورگرهای مختلف نتونند اجرا کنند
خير دوست عزيز الزامي به اين كار نيست border-radius بدون پيشوندها هم به خوبي تو همه ي مرورگرها به جز ie8 به پايين پشتيباني مشه.
اينجا (http://www.w3schools.com/cssref/css3_pr_border-radius.asp)رو يه نگاهي بندازيد بد نيست

[H:Shojaei]

دوستان میبخشید ولی %100 %100 هم جواب نداد!
در مورد radius، میشه بگید "با پیشوند های مربوط به مرورگرهای مختلف وارد کنیم" یعنی چی؟ چطوری؟!
ممنون

شما دقيقا همون مثالي كه گذاشتم رو كپي كنيد و فقط مسير عكس رو تغيير بديد بايد بشه من خودم تستش كردم شد.
منظور هم از پيشوندها اينه كه بعضي مرور گرها به طور عادي از بعضي از مشخصه ها پشتيباني نمكنن مثلا خاصيت border-image واسه opera به حالتي كه اينجا نوشتم كار نميكنه و بايد اين طوري بنويسيمش:
-o-border-image
اينجا پيشوند -o- بهش اضافه شده.
و واسه هركدوم از مرورگرها يه پيشوند خاص داريم:
crome , safari -webkit-
opera -o-
firefox -moz-
ie -ms-

[L E N A]

بله حق با شما بود! الان کار کرد!!
فقط جواب ندادید؟:

در مورد عکسام، یعنی تنها راه همینه که اینقد تو فوتوشاپ سایز عکس رو تغییر بدی که به تکست باکست خوره؟!

[H:Shojaei]

منظورتون رو نفهميدم ولي اگه اشتباه نكنم ميگيد اندازه ي عكسي كه ميخوايم واسه فيلدمون بذاريم چقدر بايد باشه.
اين رو خودتون اگه خواستيد دستي واسه كادر متننتون وارد كنيد و اون رو به اندازه ي دلخواه در بياريد و بعد عكس ها رو به همون اندازه اي كه به كادر متن داديد طراحي كنيد:

<input style="background-image:url('/img/loading.gif'); width:300px; height:100px; background-size:100% 100%; border-radius:5px;" type="text" maxlength="100" value=""/>

[L E N A]

#12 خیلی عالی بود تازه منظور تونو از پیشوند مرورگرا فهمیدم! :چشمک:

واقعا شرمنده که اینقد مزاحم میشم ولی این انجمن خیلی اعضای گلی داره آدم لذت میبره دلت میخواد هر سوالی داری تند تند بپرسی!! :لبخند:

-------------------------------------------------------------------------------------------
من قبل از اینکه تو انجمن سوالمو مطرح کنم خودم اینجوریش کرده بودم:
position شو absolute کرده بودم و تکست باکس رو برده بودم رو عکسه گذاشته بودم.
بعدش border و background شو none کرده بودم. دقیقا همونی شده بود که میخواستم تو ie8 و firefox22 هم چکش کردم درست بود
اما استادم چون absolute بود قبولش نکرد.
دلیلش چیه؟ چرا نباید از اون استفاده کرد؟

[H:Shojaei]

فكر كنم چون قراره كدهاي شما تو مانيتورهايي با رزولوشن هاي مختلف اجرا بشه و اگه absolute بذاريد تو همه ي مانيتورها يه جا نمايش داده نشه و كلا به هم بريزه اين ايراد رو گرفته.
و در كل هم اونطور كه من تا حالا فهميدم هرچي از absolute استفاده نكني بهتره.

[tadayoni]

فكر كنم چون قراره كدهاي شما تو مانيتورهايي با رزولوشن هاي مختلف اجرا بشه و اگه absolute بذاريد تو همه ي مانيتورها يه جا نمايش داده نشه و كلا به هم بريزه اين ايراد رو گرفته.
و در كل هم اونطور كه من تا حالا فهميدم هرچي از absolute استفاده نكني بهتره.
دقیقا همین حالت پیش میاد. توی قالب های responsive هم گاهی مواقع ایراد میده که اونجا بیشتر به چشم میاد