شما اینجا هستید

در CSS3 چند ویژگی جدید برای پس زمینه ها افزوده شده است که به وسیله آنها میتوان کنترل بیشتری روی پس زمینه عنصر داشت.

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

  • background-size
  • background-origin
  • background-clip

افزودن چند پس زمینه

CSS3 از طریق ویژگی background-image توان افزودن چند تصویر به یک عنصر را میدهد. با استفاده از کاما میتوان پس زمینه ها را جدا کرد و هر تصویری که اول نوشته شده روی بقیه تصاویر نمایش داده میشود.

مثال زیر دو تصویر پس زمینه دارد که تصویر اول در پایین و سمت راست صفحه نمایش داده میشود و تصویر دوم در بالا و سمت چپ صفحه نمایش داده میشود:

<html>

<head>

<style>

#example1 {

    background-image: url(img_flwr.gif), url(paper.gif);

    background-position: right bottom, left top;

    background-repeat: no-repeat, 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>

 

پس زمینه های چندتایی را به جز موارد خاص میتوان خلاصه نویسی کرد، مثال زیر به صورت خلاصه نویسی شده پس زمینه های چندتایی است:

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

اندازه پس زمینه

با بهره گیری از ویژگی background-size میتوان اندازه تصاویر پس زمینه را مشخص کرد. قبلاً اندازه تصاویر پس زمینه همان اندازه اصلی تصویر بود، سپس با پیدایش CSS3 توانستیم از تصویر پس زمینه برای چند منظور استفاده کنیم.

اندازه تصاویر با پیکسل، درصد و یا با استفاده از دو کلمه کلیدی contain یا cover مشخص میشود.

مثال زیر اندازه تصویر را با پیکسل مشخص میکند:

<html>

<head>

<style>

#example1 {

    border: 1px solid black;

    background:url(img_flwr.gif);

    background-repeat: no-repeat;

    padding:15px;

}


#example2 {

    border: 1px solid black;

    background:url(img_flwr.gif);

    background-size: 100px 80px;

    background-repeat: no-repeat;

    padding:15px;

}

</style>

</head>

<body>


<p>Original background-image:</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>Resized background-image:</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>

 

دو مقدار دیگری که برای background-size ممکن است استفاده شود contain و cover است.

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

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

مثال زیر نحوه کارکرد cover و contain را نشان میدهد:

<html>

<head>

<style>

.div1 {

    border: 1px solid black;

    height:150px;

    width:180px;

    background:url(img_flwr.gif);

    background-repeat: no-repeat;

}


.div2 {

    border: 1px solid black;

    height:150px;

    width:180px;

    background:url(img_flwr.gif);

    background-repeat: no-repeat;

    background-size: contain;

}


.div3 {

    border: 1px solid black;

    height:150px;

    width:180px;

    background:url(img_flwr.gif);

    background-repeat: no-repeat;

    background-size: cover;

}

</style>

</head>

<body>


<p>Original image:</p>

<div class="div1">

<p>Lorem ipsum dolor sit amet.</p>

</div>


<p>Using the "contain" keyword:</p>

<div class="div2">

<p>Lorem ipsum dolor sit amet.</p>

</div>


<p>Using the "cover" keyword:</p>

<div class="div3">

<p>Lorem ipsum dolor sit amet.</p>

</div>


</body>

</html>

 

تعریف اندازه برای چند تصویر پس زمینه

هنگامی که با چند تصویر پس زمینه کار میکنیم ویژگی background-size چند مقدار را نیز برای اندازه پس زمینه قبول میکند که باید هر اندازه را در آن با کاما از هم جدا کرد.

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

<html>

<head>

<style>

#example1 {

    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(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>

 

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

حالا  میخواهیم که بر روی وب سایت یک تصویر داشته باشیم که کل صفحه مرورگر وب را پوشش دهد.

برای این کار به موارد زیر نیاز هست:

  • پر کردن صفحه با تصویر
  • اندازه دادن به تصویر طبق نیاز
  • قرار دادن تصویر در مرکز صفحه
  • سبب اضافه شدن نوار اسکرول نشود

مثال زیر شیوه چگونگی انجام اینکار را نشان میدهد. در اینجا از عنصر html استفاده میکنیم سپس پس زمینه را روی ثابت و مرکز تنظیم میکنیم و سپس اندازه آن را با ویژگی background-size تنظیم میکنیم:

<html>

<head>

<style>

html {

  background: url(img_flower.jpg) no-repeat center 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>

 

ویژگی background-origin

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

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

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

مثال زیر نحواه کارکردن ویژگی background-origin را نمایش میدهد:

<html>

<head>

<style>

#example1 {

    border: 10px solid black;

    padding: 35px;

    background: url(img_flwr.gif);

    background-repeat: no-repeat;

}


#example2 {

    border: 10px solid black;

    padding: 35px;

    background: url(img_flwr.gif);

    background-repeat: no-repeat;

    background-origin: border-box;

}


#example3 {

    border: 10px solid black;

    padding: 35px;

    background: url(img_flwr.gif);

    background-repeat: no-repeat;

    background-origin: content-box;

}

</style>

</head>

<body>


<p>No background-origin (padding-box is default):</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>background-origin: 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>background-origin: 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>

 

ویژگی background-clip

ویژگی background-clip ناحیه قابل رنگ کردن پس زمینه را مشخص میکند.

این ویژگی دارای سه مقدار مختلف است :

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

مثال زیر نحوه کار کردن با ویژگی background-clip را نمایش میدهد:

<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>


<p>No background-clip (border-box is default):</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>background-clip: 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>background-clip: 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>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.