SVG درکنار رنگ
در بخش هایی از راکت که بخش های اصلی هستند بعضی تصاویر وجود دارند که من فکر می کنم SVG هستند مثلا در بخش گفت و گو رنگ پس زمینه آبیه ولی پشتش همین تصاویر SVG موجود هست می خواستم ببینم چطور این کار رو انجام دادن ممنون.
پاسخها
9
ببینید شما میتونید برای background-image چندتا تصویر قرار بدید که این تصاویر روی هم قرار میگیرند
.header {
background-image: url("./img/blue-gradient.svg") url("./img/pattern.svg");
}اینطوری میتونید مثل تصویری که مدنظر دارید بسازید
البته یه چیز دیگه ای هم هست اونم اینه که به جای تصویر گرادینت بیای و تصویر پترن رو برای background-image قرار بدی و خاصیت background-color رو اون گرادینت موردنظر قرار بدی
سلام ارادت
اون svg نیستش ، یه عکس هستش که روش یه گرادینت اعمال شده.
خیر تصویر نیستش چون قابلیت دانلود نداره خب حالا چجوری این کار رو کردن میشه توضیح بدید
@alireza.mzh
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
همونطور که دوست مون گفتن، یک عکس را بهمراه گرادیانت بکار بگیرید تا ترکیبی از رنگ و عکس شکل بگیره.
در خصوصیت background-image میتوان بیشتر از یک مقدار را قرار داد. اولی گرادیانت و دوم نشانی عکس.
عکس مورد نظر در مثال بالا که بصورت پشت سر هم تکرار شده:
ممنون یعنی الان من باید این کار رو بکنم ؟
background-image: url(./svg.svg) url(./linear.svg)یا این کار رو ؟
background--image: url(./svg/svg) linear-gradient(blue,red))برای پس زمینه ی چندگانه، این رو ببین:
https://www.w3schools.com/css/css3_backgrounds.asp
دو یا چندتا عکس میشه قرار بدی، یا بجای یک عکس از گرادیانت استفاده می کنی.
سلام.آیا میشه به svg گرادینت داد؟
@amir14olad
اینهارو می تونید مطالعه کنید:
منبع فارسی:
https://css-tricks.ir/tutorial/ساخت-گرادینت%E2%80%8C-خطی-با-عنصر-lineargradient-در-svg/
https://css-tricks.ir/reference/linear-gradient/
منبع انگلیسی:
https://www.w3schools.com/graphics/svggradlinear.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients