cssطراحی سایت

جلسه ۵۳: gradient ها تصاویر پس زمینه هستند! در CSS

بیایید درباره مفهوم کاملاً غلط gradient در CSS به عنوان تصاویر پس زمینه بحث کنیم. آماده ای؟ برو برای چند سال اول که CSS نوشتم ، نمی توانستم سرم را به چگونگی کارکرد gradient ها مشغول کنم. همچنین ، چرا روی زمین نام property می گوید ،background-image؟ من هیچ ایده ای نداشتم. خوب ، اکنون شما را ازاسترس نجات می دهم. اجازه دهید آن را برای شما توضیح دهم.

gradient ها در CSS تصاویر هستند!

مانند هر نوع تصویر دیگری که با ویژگی تصویر backgroud استفاده می شود ، گرادیان ها نیز فقط تصاویر هستند! فکر کنید .png ، .jpeg و غیره اجازه دهید که آن کمی غرق شویم . اگرچه این ممکن است به هیچ وجه مورد علاقه شما قرار نگیرد ، اما اجازه دهید یک استفاده خوب از این را به شما نشان دهم.

زمینه های متعدد با gradient ها

یکی از مزایای gradient داشتن تصاویر پس زمینه ، امکان مخلوط کردن آنها با سایر فرمت های تصویر در یک اعلامیه تصویر پس زمینه است. یه نگاهی به این بنداز:

.bg {
  background: linear-gradient(rgba(192,57,43 ,0.8), rgba(44,62,80 ,0.8)),
                        url("https://i.imgur.com/tBhfy0L.jpg") 0% 0%/cover no-repeat 
}

از این چه درست می کنی؟ اعلامیه فوق هر دو پس زمینه را برای عنصر اعمال می کند. به همین ترتیب شما یک تصویر پشت یک ترکیب گرادیان دارید!

<html>

 <head>

   <title>Gradient + Background Image</title>

 </head>

 <body>

   <div></div>

 </body>

</html>

div {
  min-height: 100vh;
  background: linear-gradient(rgba(192,57,43,0.8), rgba(44,62,80,0.8)),
              url("https://i.imgur.com/tBhfy0L.jpg") 0% 0%/cover no-repeat
}   

با خیال راحت با مقادیر بازی کنید. این یک ترفند بسیار مهم است. هنگام ایجاد زمینه های ظریف و شسته و رفته بسیار مفید است. نمودار زیر حالت ها را نشان می دهد – قبل و بعد از استفاده از ترکیب gradient.

کاربرد این چیست؟

همیشه داشتن متن روشن در پس زمینه تیره بیشتر قابل خواندن است. گاهی اوقات ، تمام آنچه شما نیاز دارید یک گرادیان ترکیبی است. در زیر مشاهده کنید:

چگونه کار می کند

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا