site-logo site-logo
CSS - تصاویر (Images)
نوشتن نظر کلیک کنید

CSS – تصاویر (Images)

آخرین بروزرسانی: 

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

چندین ویژگی CSS برای استایل دهی به یک تصویر وجود دارد:

  1. height: ارتفاع یک تصویر را تعیین می‌کند.
  2. width: عرض یک تصویر را تعیین می‌کند.
  3. border: حاشیه یک تصویر را تعیین می‌کند.
  4. border-radius: گردی گوشه‌های یک تصویر را تعیین می‌کند.
  5. opacity: سطح شفافیت یک تصویر را تعیین می‌کند.
  6. object-fit: مشخص می‌کند چگونه تصویر باید تغییر اندازه داده شود اگر نسبت ابعاد آن حفظ نشود.
  7. object-position: برای قرار دادن عنصر جایگزین شده مانند یک تصویر در ظرف خود استفاده می‌شود.
  8. filter: اثرات بصری را بر روی تصویر اعمال می‌کند، مانند آلودگی یا تنظیم روشنایی.
  9. box-shadow: اثر سایه را به یک تصویر اضافه می‌کند.
  10. background-image: تصویری را برای استفاده به عنوان پس زمینه یک عنصر مشخص می‌کند.
  11. border-image: یک تصویر را به عنوان حاشیه به یک عنصر مشخص می‌کند.
  12. image-orientation: جهت تصویر را تعیین می‌کند.
  13. image-rendering: الگوریتم برای مقیاس دادن تصویر را تعیین می‌کند.
  14. image-resolution: تعداد پیکسل‌های تصویر در هر واحد طول را تعیین می‌کند.

این ویژگی‌ها به طراحی و استایل دهی به تصاویر در صفحات وب کمک می‌کنند و امکانات متنوعی برای اضافه کردن جلوه‌ها و تغییرات به تصاویر فراهم می‌کنند.

ارتفاع تصویر (Image Height)

ویژگی height برای تعیین ارتفاع یک تصویر استفاده می‌شود. این ویژگی می‌تواند یک مقدار در واحدهای طول یا درصد داشته باشد.

در این مثال، ارتفاع تصویر با استفاده از ویژگی height تنظیم می‌شود:

<html>
<head>
</head>
<body>
   <h2>Image Height</h2>
   <div>
      <p>Height in length - 300px</p>
      <img style="height: 300px;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
   <div>
      <p>Height in percentage - 30%</p>
      <img style="height: 30%;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
   <p>Height - auto</p>
      <img style="height: auto;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

در این مثال، سه تصویر با ارتفاع متفاوت نشان داده شده است:

  1. اولین تصویر با استفاده از ویژگی height با مقدار 300 پیکسل تنظیم شده است.
  2. دومین تصویر با استفاده از ویژگی height با مقدار 30 درصد ارتفاع نسبت به ارتفاع مختص صفحه تنظیم شده است.
  3. سومین تصویر بدون تعیین ارتفاع خاص است و ارتفاع آن به طور خودکار توسط مرورگر تعیین می‌شود.

عرض تصویر (Image Width)

ویژگی width برای تعیین عرض یک تصویر استفاده می‌شود. این ویژگی می‌تواند یک مقدار در واحدهای طول یا درصد داشته باشد.

در این مثال، عرض تصویر با استفاده از ویژگی width تنظیم می‌شود:

<html>
<head>
</head>
<body>
   <h2>Image Width</h2>
   <div>
      <p>Width in length - 300px</p>
      <img style="width: 300px;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>Width in percentage - 30%</p>
      <img style="width: 30%;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>Width - auto</p>
      <img style="width: auto;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
</body>
</html>

در این مثال، سه تصویر با عرض متفاوت نشان داده شده است:

  1. اولین تصویر با استفاده از ویژگی width با مقدار 300 پیکسل تنظیم شده است.
  2. دومین تصویر با استفاده از ویژگی width با مقدار 30 درصد عرض نسبت به عرض مختص صفحه تنظیم شده است.
  3. سومین تصویر بدون تعیین عرض خاص است و عرض آن به طور خودکار توسط مرورگر تعیین می‌شود.

حاشیه تصویر (Image Border)

خاصیت border برای تعیین حاشیه یک تصویر استفاده می‌شود. این خاصیت امکان تعیین نوع و ضخامت حاشیه را فراهم می‌کند. در این مثال، دو تصویر با حاشیه‌های مختلف نشان داده شده است:

<html>
<head>
</head>
<body>
   <h2>Image Border</h2>
   <div>
      <img style="border: 10px inset black; margin-bottom: 5px;" src="images/white-flower.jpg" alt="white-flower">
      <img style="border: 10px dashed red;" src="images/white-flower.jpg" alt="white-flower">
   </div>
</body>
</html>

در این مثال:

  • تصویر اول با استفاده از خاصیت border و مقدار 10px و نوع inset و رنگ مشکی حاشیه دارد.
  • تصویر دوم با استفاده از خاصیت border و مقدار 10px و نوع dashed و رنگ قرمز حاشیه دارد.

شعاع حاشیه تصویر (Image Border Radius)

ی border-radius در CSS برای تعیین گوشه‌های گرد لبه یک عنصر مانند یک تصویر استفاده می‌شود. با تنظیم مقدار border-radius، می‌توانید درجه گردی هر گوشه از یک عنصر را کنترل کنید و یا آن‌ها را کاملاً دایره‌ای کنید.

ویژگی border-radius می‌تواند مقادیر زیر را داشته باشد:

  • length: هر مقدار طولی مانند px، pt، em و غیره.
  • percentage (%): هر مقدار درصدی مانند 30%، 50%، 5% و غیره.
  • initial: مقدار اولیه ویژگی border-radius را تنظیم می‌کند.
  • inherit: مقدار border-radius را از عنصر والد به ارث می‌برد.

border-radius یک خلاصه‌نویسی است برای:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

توجه: border-radius امکان استفاده از یک، دو، سه یا همه چهار مقدار را در یک اظهار دادن فراهم می‌کند.

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px;
   }
</style>
</head>
<body>
   <h2>Image Border Radius</h2>
   <div>
      <img style="border-radius: 40px 60px;" src="images/white-flower.jpg" alt="white-flower">
   </div>
   <div>
      <img style="border-radius: 50%;" src="images/red-flower.jpg" alt="red-flower">
   </div>
   <div>
      <img style="border-top-left-radius: 50%;" src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <img style="border-bottom-right-radius: 2em;" src="images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

شفافیت تصویر (Image Opacity)

ویژگی opacity در CSS برای تنظیم شفافیت یک عنصر استفاده می‌شود. این ویژگی به شما امکان می‌دهد که کنترل کنید که یک تصویر چقدر شفاف یا پوشیده باشد.

مقدار شفافیت (opacity) می‌تواند از 0.0 (کاملاً شفاف) تا 1.0 (کاملاً پوشیده) متغیر باشد.

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px;
   }
</style>
</head>
<body>
   <h2>Image Opacity</h2>
   <div>
      <img style="opacity: 0.2;" src="images/red-flower.jpg" alt="opacity 0.2">
   </div>
   <div>
      <img style="opacity: 0.5;" src="images/red-flower.jpg" alt="opacity 0.5">
   </div>
   <div>
      <img style="opacity: 1;" src="images/red-flower.jpg" alt="opacity 1">
   </div>
</body>
</html>

در این مثال، تصاویر با شفافیت‌های مختلف نشان داده شده‌اند. در تصاویر با opacity 0.2، شفافیت بسیار زیاد است، در تصاویر با opacity 0.5، شفافیت کمی کاهش یافته است و در تصاویر با opacity 1، هیچ شفافیتی وجود ندارد و تصاویر به صورت کاملاً پوشیده نمایش داده می‌شوند.

تطبیق شی تصویر (Image Object Fit)

ویژگی object-fit در CSS مشخص می‌کند که تصویر چگونه باید تغییر اندازه داده شود اگر نسبت ابعاد آن حفظ نشود. این ویژگی یک تصویر را با توجه به ابعاد محیط آن تغییر اندازه می‌دهد.

این ویژگی می‌تواند یکی از مقادیر زیر را داشته باشد:

  • contain: نسبت ابعاد حفظ می‌شود. محتوا به طور متناسب برای جا‌گیری در ابعاد محیط بدون برش کردن تغییر اندازه می‌یابد.
  • cover: محتوا ممکن است برای حفظ نسبت ابعاد برش داده شود. محتوا به طور متناسب برای پر کردن ابعاد محیط بدون تغییر نسبت ابعاد می‌شود.
  • fill: محتوا را به اندازه ابعاد محیط دراز می‌کند، بدون در نظر گرفتن نسبت ابعاد.
  • none: محتوا به اندازه ابعاد اصلی خود نمایش داده می‌شود، بدون هیچ گونه تغییر اندازه یا برش.
  • scale-down: محتوا به عنوان scale-down یا contain نمایش داده می‌شود. هنگامی که محتوا کوچکتر از ابعاد محیط است، به طور متناسب کوچک می‌شود تا جا بگیرد. اگر بزرگتر باشد، مانند contain عمل خواهد کرد.

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px; width: 200px;
   }
</style>
</head>
<body>
   <h2>Image Object-fit</h2>
   <div>
      <h3>fill</h3>
      <img style="object-fit: fill;" src="images/white-flower.jpg" alt="object-fit: fill">
   </div>
   <div>
      <h3>cover</h3>
      <img style="object-fit: cover;" src="images/white-flower.jpg" alt="object-fit: cover">
   </div>
   <div>
      <h3>contain</h3>
      <img style="object-fit: contain;" src="images/white-flower.jpg" alt="object-fit: contain">
   </div>
   <div>
      <h3>none</h3>
      <img style="object-fit: none;" src="images/white-flower.jpg" alt="object-fit: none">
   </div>
   <div>
      <h3>scale-down</h3>
      <img style="object-fit: scale-down;" src="images/white-flower.jpg" alt="object-fit: scale-down">
   </div>
</body>
</html>

موقعیت تصویر (Image Position)

ویژگی object-position در CSS برای قرار دادن المان جایگزین، مانند یک تصویر، در محیط خود استفاده می‌شود.

این ویژگی می‌تواند از مقادیر زیر استفاده کند:

  • <position>: تعیین موقعیت ۲D المان از یکی از این مقادیر – top، bottom، left، right، center.
  • <length-percentage>: هر مقدار طول یا درصد. مثال: 50px، 30%
  • initial: تنظیم مقدار اولیه object-position.
  • inherit: به ارث بردن مقدار object-position از المان والد.

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   article {
      margin: 0.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
      gap: 0.5rem;
   }
   .img-container {
      width: 20ch;
      border: 1ch solid #71a589;
      background: orange;
   }
   img {
      width: 100%;
      display: block;
      object-fit: none;
   }
   .image-1 {
      object-position: 50% 50%;
   }
   .image-2 {
      object-position: left bottom;
   }
   .image-3 {
      object-position: 20% 80%;
   }
   .image-4 {
      object-position: 40px 60px;
   }
   .image-5 {
      object-position: right 75%;
   }
   .image-6 {
      object-position: 10px center;
   }
</style>
</head>
<body>
   <h2>Image Object Position</h2>
   <article>
      <div class="container">
         <h3>1. Default Value</h3>
         <div class="img-container">
            <img class="image-1" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>2. object-position: left bottom;</h3>
         <div class="img-container">
            <img class="image-2" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>3. object-position: 20% 80%;</h3>
         <div class="img-container">
            <img class="image-3" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>4. object-position: 40px 60px;</h3>
         <div class="img-container">
            <img class="image-4" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>5. object-position: right 75%;</h3>
         <div class="img-container">
            <img class="image-5" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>6. object-position: 10px center;</h3>
         <div class="img-container">
            <img class="image-6" src="images/scenery2.jpg" />
         </div>
      </div>
   </article>
</body>
</html>

در این مثال، تصاویر با موقعیت‌های مختلف object-position نشان داده شده‌اند.

فیلتر تصویر (Image Filter)

ویژگی filter در CSS برای اعمال اثرات بصری به یک عنصر مانند مات کردن، برعکس کردن رنگ‌ها، تنظیم روشنایی و تضاد، یا اعمال فیلترهایی مانند خاکستری کردن استفاده می‌شود.

همین اثر می‌تواند برای یک تصویر نیز به دست آید.

ویژگی filter تعدادی از توابع و مقادیر را که اثر خاص را مشخص می‌کنند، قبول می‌کند. در اینجا چندین تابع معمولاً استفاده شده را آورده‌ایم:

  • blur(<length>): تصویر را مات می‌کند. مثال = blur(5px)
  • brightness(<number>|<percentage>): روشنایی تصویر را تنظیم می‌کند. مثال = brightness(0.5|30%)
  • contrast(<number>|<percentage>): تضاد تصویر را تنظیم می‌کند. مثال = contrast(50%)
  • grayscale(<number>|<percentage>): تصویر را به تصویر خاکستری تبدیل می‌کند. مثال = grayscale(80%)
  • hue-rotate(<angle>|<zero>): چرخش رنگ اعمال می‌شود. مثال = hue-rotate(80deg)
  • drop-shadow(offsetx offsety blur-radius color): افزودن اثر سایه به تصویر. مثال = drop-shadow(3px 5px 10px red)
  • opacity(<number>|<percentage>): شفافیت تصویر را تنظیم می‌کند. مثال = opacity(0.4)
  • invert(<number>|<percentage>): رنگ‌های المان را برعکس می‌کند، باعث می‌شود المان با ارزش‌های رنگ برعکس ظاهر شود. مثال = invert(20%)
  • saturate(<number>|<percentage>): اشباع تصویر را تنظیم می‌کند. مثال = saturate(0.8)
  • sepia(<number>|<percentage>): اثر سپیا را به المان اعمال می‌کند، باعث می‌شود المان با یک رنگ قهوه‌ای وینتاژ ظاهر شود. مثال = sepia(50%)

شما می‌توانید این توابع را در هر تعداد ترکیب کنید تا بافت تصویر را تنظیم کنید. ترتیبی که در ارسال مقادیر دنبال می‌کنید، در بافت تصویر دنبال می‌شود.

در اینجا یک مثال آورده شده است:

<html>
<head>
</head>
<body>
   <h2>Filter Image</h2>
   <div>
      <h3>No Filter</h3>
      <img style="object-fit: none;" src="images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Filter blur</h3>
      <img style="object-fit: none; filter: blur(5px);" src="images/scenery2.jpg" alt="filter blur">
   </div>
   <div>
      <h3>Filter grayscale</h3>
      <img style="object-fit: none; filter: grayscale(80%);" src="images/scenery2.jpg" alt="filter grayscale">
   </div>
   <div>
      <h3>Filter saturate</h3>
      <img style="object-fit: none; filter: saturate(40%);" src="images/scenery2.jpg" alt="filter saturate">
   </div>
</body>
</html>

افکت سایه تصویر (Image Shadow Effect)

ویژگی box-shadow در CSS به شما کمک می‌کند تا یک اثر سایه به یک عنصر، مانند یک تصویر، اضافه کنید.

یک سایه با انحرافات افقی و عمودی نسبت به عنصر، شعاع ماتی، و رنگ توصیف می‌شود. دنبالهٔ سینتکس box-shadow به صورت زیر است:

{ box-shadow: inset horizontal vertical blur-radius spread color; }

این ویژگی می‌تواند مقادیر زیر را داشته باشد:

  • inset: یک کلمه کلیدی اختیاری است که تعیین می‌کند که سایه در داخل یا بیرون عنصر قرار دارد. اگر inset مشخص نشود، سایه در بیرون قرار می‌گیرد.
  • horizontal: موردنیاز برای تعیین فاصله افقی سایه از جعبه است.
  • vertical: موردنیاز برای تعیین فاصله عمودی سایه از جعبه است.
  • blur radius: اختیاری است. این مقدار طول است. هر چه این مقدار بزرگتر باشد، ماتی بیشتر، بنابراین سایه بزرگتر و روشن‌تر می‌شود. مقادیر منفی مجاز نیستند. اگر مشخص نشود، صفر خواهد بود (لبه سایه تیز است).
  • spread: اختیاری است. فاصله‌ای که سایه پخش می‌شود را تعیین می‌کند. یک طول مثبت باعث می‌شود سایه بزرگتر از عنصر خود شود، و یک طول منفی باعث می‌شود کوچکتر شود. اگر مشخص نشود، صفر خواهد بود (سایه به اندازه عنصر خواهد بود).
  • color: برای مقادیر ممکن و نشانه‌ها، به مقادیر رنگ مراجعه کنید. اگر مشخص نشود، به currentcolor پیش‌فرض می‌شود.

مثال = box-shadow(10px 10px 20px #3300FF)

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   .img1{
      object-fit: none;
      box-shadow: none
   }
   .img2{
      object-fit: none;
      box-shadow: 40px 40px 10px rgb(247, 174, 187);
   }
   .img3{
      object-fit: none;
      box-shadow: -40px 40px 10px rgb(247, 174, 187);
   }
</style>
</head>
<body>
   <h2>Image Shadow</h2>
   <div>
      <h3>Box shadow on image: None</h3>
      <img class="img1" src="images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Box shadow on image</h3>
      <img class="img2" src="images/scenery2.jpg" alt="No filter">
   </div>
   <div>
      <h3>Box shadow on image:negative value</h3>
      <img class="img3" src="images/scenery2.jpg" alt="No filter">
   </div>
</body>
</html>

تصویر پس زمینه (Image As Background)

در CSS، می‌توانید یک تصویر را به عنوان پس‌زمینه برای عنصر دیگری تنظیم کنید. ویژگی‌ای که برای این منظور استفاده می‌شود، ویژگی background-image است.

ویژگی background-image یک یا چند تصویر را به عنوان پس‌زمینه تنظیم می‌کند.

می‌تواند مقادیر زیر را داشته باشد:

  • none: مشخص می‌کند که هیچ تصویری به عنوان پس‌زمینه تنظیم نشده است.
  • <image>: آدرس URL تصویر برای تنظیم به عنوان پس‌زمینه.

توجه: می‌توانید چندین تصویر را به عنوان پس‌زمینه اضافه کنید. فقط کافی است تصاویر را با استفاده از کاما جدا کنید.

در اینجا یک مثال آورده شده است:

<html>
<head>
<style>
   body {
      background-color: beige;
      background-image: url(images/logo.png);
   }
</style>
</head>
<body>
</body>
</html>

خلاصه

اینجا یک خلاصه از ویژگی‌های CSS برای استایل‌دهی به تصاویر آمده است:

  1. height: این ویژگی ارتفاع تصویر را تنظیم می‌کند.
  2. width: این ویژگی عرض تصویر را تنظیم می‌کند.
  3. border: این ویژگی حاشیه تصویر را تعیین می‌کند.
  4. image effects: این ویژگی افکت‌های مختلفی را بر روی تصویر تعیین می‌کند، مانند blur، brightness، contrast و غیره.
  5. image-orientation: این ویژگی نمایش یا جهت تصویر را تعیین می‌کند.
  6. image-rendering: کنترل می‌کند که تصویر باید توسط مرورگر چگونه رندر شود.
  7. background-image: یک اشاره‌گر به یک منبع تصویر را تعیین می‌کند که باید در پس‌زمینه یک عنصر قرار گیرد.
  8. border-image: این ویژگی به شما امکان می‌دهد یک تصویر را به عنوان حاشیه اطراف یک عنصر اضافه کنید.
  9. opacity: به شما امکان می‌دهد که شفافیت یا عدم شفافیت تصویر را کنترل کنید.
  10. object-fit: مشخص می‌کند چگونه تصویر باید تغییر اندازه یابد اگر نسبت ابعادش حفظ نشود.
  11. object-position: برای قرار دادن عنصر جایگزین، مانند یک تصویر، در ظرف‌بندی آن استفاده می‌شود.
  12. box-shadow: به شما کمک می‌کند تا یک اثر سایه به یک عنصر، مانند یک تصویر، اضافه کنید.
  13. border-radius: این ویژگی گوشه‌های گرد مرز یک عنصر را مانند یک تصویر تعیین می‌کند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.