جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
آرمین امیری نسب
4 سال پیش توسط آرمین امیری نسب مطرح شد
9 پاسخ

SVG درکنار رنگ

در بخش هایی از راکت که بخش های اصلی هستند بعضی تصاویر وجود دارند که من فکر می کنم SVG هستند مثلا در بخش گفت و گو رنگ پس زمینه آبیه ولی پشتش همین تصاویر SVG موجود هست می خواستم ببینم چطور این کار رو انجام دادن ممنون.


ثبت پرسش جدید
سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 4 سال پیش مطرح شد
2

ببینید شما میتونید برای background-image چندتا تصویر قرار بدید که این تصاویر روی هم قرار میگیرند

.header {
    background-image: url("./img/blue-gradient.svg") url("./img/pattern.svg");
}

اینطوری میتونید مثل تصویری که مدنظر دارید بسازید
البته یه چیز دیگه ای هم هست اونم اینه که به جای تصویر گرادینت بیای و تصویر پترن رو برای background-image قرار بدی و خاصیت background-color رو اون گرادینت موردنظر قرار بدی


علیرضا معمارزاده
تخصص : junior level developer
@alireza.mzh 4 سال پیش مطرح شد
2

سلام ارادت
اون svg نیستش ، یه عکس هستش که روش یه گرادینت اعمال شده.


آرمین امیری نسب
تخصص : برنامه نویس فرانت اند
@arminamirinasab 4 سال پیش مطرح شد
0

خیر تصویر نیستش چون قابلیت دانلود نداره خب حالا چجوری این کار رو کردن میشه توضیح بدید
@alireza.mzh


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
1

همونطور که دوست مون گفتن، یک عکس را بهمراه گرادیانت بکار بگیرید تا ترکیبی از رنگ و عکس شکل بگیره.
در خصوصیت background-image میتوان بیشتر از یک مقدار را قرار داد. اولی گرادیانت و دوم نشانی عکس.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

عکس مورد نظر در مثال بالا که بصورت پشت سر هم تکرار شده:
عکس پس زمینه راکت


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 4 سال پیش مطرح شد
2

ببینید شما میتونید برای background-image چندتا تصویر قرار بدید که این تصاویر روی هم قرار میگیرند

.header {
    background-image: url("./img/blue-gradient.svg") url("./img/pattern.svg");
}

اینطوری میتونید مثل تصویری که مدنظر دارید بسازید
البته یه چیز دیگه ای هم هست اونم اینه که به جای تصویر گرادینت بیای و تصویر پترن رو برای background-image قرار بدی و خاصیت background-color رو اون گرادینت موردنظر قرار بدی


آرمین امیری نسب
تخصص : برنامه نویس فرانت اند
@arminamirinasab 4 سال پیش مطرح شد
0

ممنون یعنی الان من باید این کار رو بکنم ؟

background-image: url(./svg.svg) url(./linear.svg)

یا این کار رو ؟

background--image: url(./svg/svg) linear-gradient(blue,red))

@alireza.mzh @hossein.r.1442 @milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

برای پس زمینه ی چندگانه، این رو ببین:
https://www.w3schools.com/css/css3_backgrounds.asp

دو یا چندتا عکس میشه قرار بدی، یا بجای یک عکس از گرادیانت استفاده می کنی.


Amirtd
@amir14olad 3 سال پیش مطرح شد
0

سلام.آیا میشه به svg گرادینت داد؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش آپدیت شد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام