تصاویر پس زمینه ترکیبی در CSS

تصاویر پس زمینه ی ترکیبی

زبان CSS به شما اجازه می دهد که با استفاده از background-image چندین تصویر پس زمینه را برای یک عنصر واحد تعیین کنید! تصاویر مختلف توسط ویرگول انگلیسی از هم جدا شده و روی هم قرار می گیرند به طوری که اولین تصویر (در ترتیب کدنویسی) نزدیک ترین / بالاترین تصویر نسبت به چشم کاربر خواهد بود.

به طور مثال کد زیر دو تصویر پس زمینه دارد که اولی یک گل و دومی تکسچر کاغذ است:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(https://www.w3schools.com/css/img_flwr.gif), url(https://www.w3schools.com/css/paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

البته توجه داشته باشید که می توانید از دستور خلاصه ی background نیز استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(https://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(https://www.w3schools.com/css/paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تعیین اندازه

شما می توانید با استفاده از background-size اندازه ی تصاویر پس زمینه را تعیین کنید که می تواند در واحد های درصد، پیکسل و... یا با استفاده از کلیدواژه های contain و cover مشخص شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background:url(https://www.w3schools.com/css/img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding:15px;
}

#example2 {
  border: 1px solid black;
  background:url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
  padding:15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>تصویر کوچک شده</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>تصویر اصلی با سایز بزرگ</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که میبینید تغییر سایز به راحتی انجام شده است اما در مورد کلیدواژه های contain و cover باید بگوییم contain تصویر را تا جایی که بتواند بزرگ میکند (البته طول و عرض باید در فضای استفاده شده جا شوند).

مثلا ممکن است بخواهید قسمتی از صفحه را با یک تصویر بپوشانید؛ در این حالت پوشاندن صفحه با استفاده از واحد های پیکسل و ... کمی دردسر ساز است. از طرفی cover سعی می کند تصویر پس زمینه را طوری قرار دهد که فضای نگهدارنده اش را کاملا بپوشاند (عرض و ارتفاع اش یا کاملا اندازه ی فضای نگهدارنده اند یا از آن بزرگتر هستند).

تفاوت این دو بهتر در مثال زیر دیده می شود:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height:120px;
  width:150px;
  background:url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height:120px;
  width:150px;
  background:url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height:120px;
  width:150px;
  background:url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>contain تنظیم روی حالت</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>cover تنظیم روی حالت</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>بدون تعیین اندازه برای تصویر پس زمینه</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>تصویر اصلی</p>
<img src="https://www.w3schools.com/css/img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: اگر بخواهیم اندازه ی چندین تصویر را مشخص کنیم چطور؟

پاسخ: خاصیت background-size می تواند با استفاده از ویرگول انگلیسی چندین مقدار مختلف بگیرد! در مثال زیر سه تصویر مختلف روی هم داریم که برای هر کدام اندازه ای تعیین کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(https://www.w3schools.com/css/img_tree.gif) left top no-repeat, url(https://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(https://www.w3schools.com/css/paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تصاویر پس زمینه تمام صفحه

فرض کنید بخواهیم برای کل صفحه ی وب خود تصویر پس زمینه ای تعیین کنیم که تمام صفحه ی مرورگر کاربر را بگیرد. برای این کار باید:

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

در مثال زیر همین کار را کرده ایم؛ ما ابتدا از عنصر <html> استفاده کرده ایم چرا که <html> همیشه حداقل ارتفاع مرورگر را میگیرد. سپس بقیه ی موارد را اعمال کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(https://www.w3schools.com/css/img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین می توانیم با استفاده از خصوصیات موقعیت دهی در CSS و بازی کردن با عنصر <div> یک تصویر hero به وجود بیاوریم. تصاویر hero تصاویری هستند که روی آن ها (معمولا در وسط) متن و متعلقاتی مانند دکمه ها قرار دارد. مثال:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(https://www.w3schools.com/css/img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور background-origin

دستور background-origin مشخص می کند که تصویر پس زمینه در کدام قسمت قرار بگیرد. این خصوصیت سه مقدار جداگانه می گیرد:

border-box: تصویر پس زمینه از قسمت بالا و چپِ border شروع می شود.
padding-box (حالت پیش فرض): تصویر پس زمینه از قسمت بالا و چپِ padding (گوشه ی padding) شروع می شود.
content-box: تصویر پس زمینه از قسمت بالا و چپِ محتوا شروع می شود.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
}

#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(https://www.w3schools.com/css/img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>که حالت پیش فرض است اعمال شده است padding-box </p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>border-box حالت</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>content-box حالت</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور `background-clip`

این خاصیت موقعیت نقاشی و رنگ آمیزی پس زمینه را مشخص می کند.

این خصوصیت سه مقدار جداگانه می گیرد:

border-box (حالت پیش فرض): رنگ ها از قسمت خارجی border شروع می شوند.
padding-box: رنگ ها از قسمت خارجی padding شروع می شوند.
content-box: رنگ ها از درون قسمت content box شروع می شوند.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding:35px;
  background: yellow;
}

#example2 {
  border: 10px dotted black;
  padding:35px;
  background: yellow;
  background-clip: padding-box;
}

#example3 {
  border: 10px dotted black;
  padding:35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>border-box حالت</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>padding-box حالت</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>content-box حالت</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت استفاده کرده باشید.