CSS background-size 属性
- 上一页 background-repeat
- 下一页 block-size
నిర్వచనం మరియు వినియోగం
background-size లక్షణం బ్యాక్గ్రౌండ్ చిత్రం పరిమాణాన్ని నిర్ణయిస్తుంది.
ఇతర పరిశీలనలు:
CSS పాఠ్యక్రమం:CSS బ్యాక్గ్రౌండ్、CSS బ్యాక్గ్రౌండ్ (అధునాతన)
HTML DOM పరిశీలన మానాలు:backgroundSize లక్షణం
ఉదాహరణ
బ్యాక్గ్రౌండ్ చిత్రం పరిమాణాన్ని నిర్ణయిస్తుంది:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
CSS సంకేతం
background-size: length|percentage|cover|contain;
లక్షణ విలువ
| విలువ | వివరణ | పరీక్ష |
|---|---|---|
| length |
బ్యాక్గ్రౌండ్ చిత్రం వెడల్పు మరియు పొడవును అమర్చుతుంది. మొదటి విలువ వెడల్పును అమర్చుతుంది, రెండవ విలువ పొడవును అమర్చుతుంది. ఒక విలువను మాత్రమే అమర్చినట్లయితే, రెండవ విలువను "auto"గా మెటామార్ఫింగ్ చేస్తుంది. |
పరీక్ష |
| percentage |
పిత్ర కంటెంట్లో శాతములా బ్యాక్గ్రౌండ్ చిత్రం వెడల్పు మరియు పొడవును అమర్చుతుంది. మొదటి విలువ వెడల్పును అమర్చుతుంది, రెండవ విలువ పొడవును అమర్చుతుంది. ఒక విలువను మాత్రమే అమర్చినట్లయితే, రెండవ విలువను "auto"గా మెటామార్ఫింగ్ చేస్తుంది. |
పరీక్ష |
| cover |
బ్యాక్గ్రౌండ్ చిత్రాన్ని తగినంత పొడిగించి, బ్యాక్గ్రౌండ్ రీజన్ని పూర్తిగా కప్పుతుంది. బ్యాక్గ్రౌండ్ చిత్రం కొన్ని భాగాలు బ్యాక్గ్రౌండ్ లొకేషన్ రీజన్లో చూపబడలేవు. |
పరీక్ష |
| contain | చిత్రాన్ని గరిష్ట పరిమాణానికి విస్తరించి, దాని వెడల్పు మరియు పొడవు కంటెంట్ రీజన్ని పూర్తిగా సరిపోతుంది. | పరీక్ష |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | auto |
|---|---|
| పారంతర్యం: | no |
| వెర్షన్: | CSS3 |
| JavaScript సంకేతం: | object.style.backgroundSize="60px 80px" |
ఇతర ఉదాహరణలు
- బ్యాక్గ్రౌండ్ చిత్రాన్ని పొడిగించి
- బ్యాక్గ్రౌండ్ చిత్రాన్ని పొడిగించి, సమగ్ర కంటెంట్ రీజన్ని పూర్తిగా కప్పుతుంది.
- బ్యాక్గ్రౌండ్ చిత్రాన్ని పొడిగించి, బ్యాక్గ్రౌండ్ చిత్రాన్ని అనంతరం నాలుగుసార్లు ప్రతికృతం చేస్తుంది.
- బ్యాక్గ్రౌండ్ చిత్రాన్ని పొడిగించి, బ్యాక్గ్రౌండ్ చిత్రాన్ని అనంతరం అనితరం నాలుగుసార్లు ప్రతికృతం చేస్తుంది.
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ని పేర్కొన్నాయి.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE / Edge | Firefox | Safari | Opera |
| 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
- 上一页 background-repeat
- 下一页 block-size
