یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها
استفاده از تخفیف‌ها
SVG درکنار رنگ
در بخش هایی از راکت که بخش های اصلی هستند بعضی تصاویر وجود دارند که من فکر می کنم SVG هستند مثلا در بخش گفت و گو رنگ پس زمینه آبیه ولی پشتش همین تصاویر SVG موجود هست می خواستم ببینم چطور این کار رو انجام دادن ممنون.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ببینید شما میتونید برای background-image چندتا تصویر قرار بدید که این تصاویر روی هم قرار میگیرند
.header {
background-image: url("./img/blue-gradient.svg") url("./img/pattern.svg");
}اینطوری میتونید مثل تصویری که مدنظر دارید بسازید
البته یه چیز دیگه ای هم هست اونم اینه که به جای تصویر گرادینت بیای و تصویر پترن رو برای background-image قرار بدی و خاصیت background-color رو اون گرادینت موردنظر قرار بدی
خیر تصویر نیستش چون قابلیت دانلود نداره خب حالا چجوری این کار رو کردن میشه توضیح بدید
@alireza.mzh
همونطور که دوست مون گفتن، یک عکس را بهمراه گرادیانت بکار بگیرید تا ترکیبی از رنگ و عکس شکل بگیره.
در خصوصیت background-image میتوان بیشتر از یک مقدار را قرار داد. اولی گرادیانت و دوم نشانی عکس.
ببینید شما میتونید برای background-image چندتا تصویر قرار بدید که این تصاویر روی هم قرار میگیرند
.header {
background-image: url("./img/blue-gradient.svg") url("./img/pattern.svg");
}اینطوری میتونید مثل تصویری که مدنظر دارید بسازید
البته یه چیز دیگه ای هم هست اونم اینه که به جای تصویر گرادینت بیای و تصویر پترن رو برای background-image قرار بدی و خاصیت background-color رو اون گرادینت موردنظر قرار بدی
ممنون یعنی الان من باید این کار رو بکنم ؟
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
دو یا چندتا عکس میشه قرار بدی، یا بجای یک عکس از گرادیانت استفاده می کنی.
@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