CSS ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ

فهرست مطالب

نمایش فهرست مطالب

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﻩﻮﻠﺟ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ،ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

style="color:crimson">background-color
style="color:crimson">background-image
style="color:crimson">background-repeat
style="color:crimson">background-attachment
style="color:crimson">background-position
style="color:crimson">ﺲﭘﻪﻨﯿﻣﺯ (ﺮﺼﺘﺨﻣ ﯽﮔﮋ

CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ

.ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ backgro

`ﻝﺎﺜﻣ`

:ﺩﻮﺷ ﯽﻣ ﻢﯿﻈﻨﺗ ﺮﯾﺯ ﺕﺭﻮﺻ ﻪﺑ ﻪﺤﻔﺻ ﮏﯾ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ

body {
  background-color: lightblue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

:ﻂﺳﻮﺗ ﺐﻠﻏﺍ ﮓﻧﺭ ﮏﯾ ،CSS ﺎﺑ

"ﺰﻣﺮﻗ" ﺪﻨﻧﺎﻣ - ﺮﺒﺘﻌﻣ ﮓﻧﺭ ﻡﺎﻧ ﮏﯾ
"ff0000#" ﺪﻨﻧﺎﻣ - HEX ﺭﺍﺪﻘﻣ ﮏﯾ
"rgb(255,0,0)" ﺪﻨﻧﺎﻣ - RGB ﺭﺍﺪﻘﻣ ﮏﯾ

ﺪﯿﻨﮐ ﻩﺎﮕﻧ CSS ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﻪﺑ ﻞﻣﺎﮐ ﺕﺎﻋﻼﻃﺍ ﯼﺍﺮﺑ

`ﺮﺻﺎﻨﻋ ﺮﯾﺎﺳ`

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ HTML ﺮﺼﻨﻋ ﺮﻫ ﯼﺍﺮﺑ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

`ﻝﺎﺜﻣ`

:ﺖﺷﺍﺩ ﺪﻨﻫﺍﻮﺧ ﯽﺗﻭﺎﻔﺘﻣ ﻪﻨﯿﻣﺯﺲﭘ ﯼﺎﻫﮓﻧﺭ <div> ﻭ <h1>، <p> ﺮﺻﺎﻨﻋ ،ﺎﺠﻨﯾﺍ ﺭ

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

`ﺖﯿﻓﺎﻔﺷ/ﺖﯿﻓﺎﻔﺷ`

:ﺖﺳﺍ ﺮﺗ ﻑﺎﻔﺷ ،ﺪﺷﺎﺑ ﺮﺘﻤﮐ ﺭﺍﺪﻘﻣ ﻪﭼ ﺮﻫ .ﺩﺮﯿﮕﺑ 1.0 - 0.0 ﺯﺍ ﯼﺭﺍﺪﻘﻣ ﺪﻧﺍﻮﺗ ﯽﻣ .ﺪﻨﮐ ﯽ





opacity 1



opacity 0.6



opacity 0.3



opacity 0.1




                                                                          ﻝﺎﺜﻣ
div {
  background-color: green;
  opacity: 0.3;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>


ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻡﺎﮕﻨﻫ ﻥﺩﻮﺑ ﺩ
                                                     RGBA ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺖﯿﻓﺎﻔﺷ
.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ RGBA ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﺯﺍ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﻝﺎﻤﻋﺍ




100% opacity



60% opacity



30% opacity



10% opacity




،RGB ﺮﺑ ﻩﻭﻼﻋ .ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮓﻧﺭ ﺭﺍﺪﻘﻣ ﻥﺍﻮﻨﻋ ﻪﺑ RGB ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻪﮐ ﺪﯿﺘﻓﺮﮔ ﺩﺎﯾ ﺎ
ﻦﯾﺍ .ﺩﻮﺷﯽﻣ ﺺﺨﺸﻣ (ﺎﻔﻟﺁ ،ﯽﺑﺁ ،ﺰﺒﺳ ،ﺰﻣﺮﻗ) rgba :ﺎﺑ RGBA ﮓﻧﺭ ﺭﺍﺪﻘﻣ ﮏ
ﻪﺘﮑﻧ: ﮓﻧﺭ ﺶﺨﺑ ﺭﺩﯼﺎﻫ CSS ﮓﻧﺭ ﻩﺭﺎﺑﺭﺩ ﺎﻣﯼﺎﻫ RGBA ﺩﺮﮐ ﺪ
                                                                          ﻝﺎﺜﻣ
div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>


                                                        CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﯽﮔﮋﯾﻭ
background-color
                                          ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →