CSS బ్యాక్గ్రౌండ్

CSS పూర్తి రంగులను బ్యాక్‌గ్రౌండ్‌గా ఉపయోగించడానికి అనుమతిస్తుంది, కానీ బ్యాక్‌గ్రౌండ్ చిత్రాలను ఉపయోగించి చాలా క్లిష్టమైన ప్రభావాలను సృష్టించడానికి కూడా అనుమతిస్తుంది.

CSS ఈ విషయంలో HTML కంటే చాలా మంచి సామర్థ్యం కలిగి ఉంది.

బ్యాక్‌గ్రౌండ్ రంగు

ఉపయోగించవచ్చు background-color లక్షణంఅంశాలకు బ్యాక్‌గ్రౌండ్‌కలర్ ని సెట్ చేయడం. ఈ లక్షణం ఏదైనా ప్రమాణిక రంగు విలువను అంగీకరిస్తుంది.

ఈ నియమం అంశాల బ్యాక్‌గ్రౌండ్‌ను గ్రే రంగులో సెట్ చేస్తుంది:

p {background-color: gray;}

మీరు బ్యాక్‌గ్రౌండ్‌కలర్ ని అంశంలోని వచనమునుండి బయటకు కొంచెం కట్టుకునేలా చేయాలి అని ఆశిస్తే, కొంచెం అంతరాన్ని పెంచండి:

p {background-color: gray; padding: 20px;}

亲自试一试

అన్ని అంశాలకు బ్యాక్‌గ్రౌండ్‌కలర్ నిర్ధారించవచ్చు, ఇది body నుండి em మరియు a వంటి లోపలి అంశాల వరకు ఉంటుంది.

background-color పారంతులు వారిస్థితికి వచ్చి ఉంటుంది, అప్రమేయం ట్రాన్స్‌పరెంట్ ఉంటుంది. ట్రాన్స్‌పరెంట్ అనేది 'పారదర్శకత' అని అర్థం. అంటే, ఒక అంశానికి బ్యాక్‌గ్రౌండ్‌కలర్ లేకపోయినట్లయితే, బ్యాక్‌గ్రౌండ్ పారదర్శకంగా ఉంటుంది, అలా తన ముందంజలో ఉన్న అంశాల బ్యాక్‌గ్రౌండ్ కనిపించగలుగుతుంది.

బ్యాక్‌గ్రౌండ్ చిత్రం

చిత్రాన్ని బ్యాక్‌గ్రౌండ్‌లో పెట్టడానికి, ఉపయోగించాలి background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

మీరు ఇన్‌లైన్ ఎలమెంట్లకు బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ అనువర్తించవచ్చు, ఈ ఉదాహరణలో లింక్‌కు బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ అనువర్తించబడింది:

a.radio {background-image: url(/i/eg_bg_07.gif);}

亲自试一试

సిద్ధాంతకు ప్రకారం, టెక్స్ట్‌యారీజ్ మరియు సెలెక్ట్ వంటి రిప్లేసింగ్ ఎలమెంట్లకు బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ ప్రాయోగికంగా అనువర్తించబడవచ్చు, కానీ అన్ని యూజర్ ఏజెంట్లు ఈ పరిస్థితిని మంచిగా నిర్వహించలేదు.

మరియు మరొక సమాచారం అని కూడా పేర్కొనాలి, background-image కూడా పారెంట్ కు అనుగుణంగా ఉండదు. నిజానికి, అన్ని బ్యాక్‌గ్రౌండ్ అట్రిబ్యూట్లు పారెంట్ కు అనుగుణంగా ఉండదు.

బ్యాక్‌గ్రౌండ్ రిపీట్

పేజీలో బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ పునరావృతం చేయాలి ఉంటే, ఈ ఉపయోగించవచ్చు background-repeat అట్రిబ్యూట్

అట్రిబ్యూట్ విలువలో repeat ఉన్నప్పుడు, ఇమేజ్‌న్ హోరిజంటల్ మరియు వెర్టికల్ దిశలలో ప్రతిపాదించబడుతుంది, ఇది బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ సాధారణంగా ప్రతిపాదించబడుతుంది. repeat-x మరియు repeat-y అట్రిబ్యూట్లు ఇమేజ్‌న్‌ను హోరిజంటల్ లేదా వెర్టికల్ దిశలో మాత్రమే పునరావృతం చేస్తాయి, no-repeat అట్రిబ్యూట్ ఇమేజ్‌న్‌ను ఏ దిశలోనూ పునరావృతం చేయకుండా పెట్టబడుతుంది.

డిఫాల్ట్‌గా, బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ ఒక ఎలమెంట్‌కు ఎడమ మేలము నుండి ప్రారంభం అవుతుంది. ఈ ఉదాహరణను చూడండి:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

亲自试一试

బ్యాక్‌గ్రౌండ్ లొకేషన్

ఉపయోగించవచ్చు background-position అట్రిబ్యూట్బ్యాక్‌గ్రౌండ్‌లో ఇమేజ్‌న్ పోజిషన్ మార్చండి.

ఈ ఉదాహరణలో body ఎలమెంట్‌లో బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ మధ్యన పోజిషన్ చేయబడింది:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

బ్యాక్‌గ్రౌండ్‌పోజిషన్ అట్రిబ్యూట్‌కు విలువలు అనేక మార్గాలు ఉన్నాయి. మొదటిగా, కొన్ని కీర్డ్‌వర్డ్‌లను ఉపయోగించవచ్చు: టాప్, బట్టమ్, లెఫ్ట్, రైట్ మరియు సెంటర్. సాధారణంగా, ఈ కీర్డ్‌వర్డ్‌లు జంటగా ఉంటాయి, కానీ అది ఎప్పుడూ కాదు. లెంగ్త విలువలను కూడా ఉపయోగించవచ్చు, వంటి 100px లేదా 5cm, ఫలితంగా శాతాల విలువలను కూడా ఉపయోగించవచ్చు. వివిధ రకాల విలువలు బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్ పోజిషన్‌కు కొంత తేడా చేస్తాయి.

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

ఒక కీర్తి మాత్రమే ఉన్నట్లయితే, మరొక కీర్తి సెంటర్ గా పరిగణించబడుతుంది.

కాబట్టి, ప్రతి పేరాగ్రాఫ్ యొక్క మధ్యలో ఒక చిత్రాన్ని ప్రదర్శించడానికి ఈ విధంగా ప్రకటించవచ్చు:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

ఇక్కడ సమానమైన స్థానాల కీర్తులు ఉన్నాయి:

ఒకే కీర్తి సమానమైన కీర్తులు
సెంటర్ సెంటర్ సెంటర్
టాప్ టాప్ సెంటర్ లేదా సెంటర్ టాప్
బోటమ్ బోటమ్ సెంటర్ లేదా సెంటర్ బోటమ్
రైట్ రైట్ సెంటర్ లేదా సెంటర్ రైట్
లెఫ్ట్ లెఫ్ట్ సెంటర్ లేదా సెంటర్ లెఫ్ట్

శాతమానికి అందించిన విలువల

శాతమానికి అందించిన విలువల ప్రకటన చాలా క్లిష్టం. మీరు చిత్రాన్ని ఎలిమెంట్లో కేంద్రంగా ఉంచడానికి శాతమానికి అందించిన విలువలను ఉపయోగించడం చాలా సులభం:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

ఇది చిత్రాన్ని తగినంతగా స్థానం చేయడానికి మరియు దాని కేంద్రంతో ఎలిమెంట్ యొక్క కేంద్రం మద్దతు అవుతాయి.లేదా అంటే, శాతమానికి అందించిన విలువలు ఎలిమెంట్ మరియు చిత్రానికి ఉపయోగించబడతాయి.అంటే, చిత్రంలో పేర్కొన్న 50% 50% పాయింట్ (కేంద్రం) మరియు ఎలిమెంట్లో పేర్కొన్న 50% 50% పాయింట్ (కేంద్రం) మద్దతు అవుతాయి.

చిత్రం 0% 0% స్థానంలో ఉన్నట్లయితే, దాని పైకి పైకి ఎలిమెంట్ యొక్క లైనింగ్ ప్యాడ్డింగ్ కు పైకి నుండి దాని పైకి పైకి ఉంటుంది. చిత్రం స్థానం 100% 100% ఉన్నట్లయితే, చిత్రం యొక్క కుడిపైకి కుడి మూలలు ఎలిమెంట్ యొక్క కుడిమూలలు స్థానంలో ఉంటుంది.

అందువల్ల, మీరు ఒక చిత్రాన్ని హోరిజంటల్ 2/3, వెర్టికల్ 1/3 స్థానంలో చేయడానికి ఈ విధంగా ప్రకటించవచ్చు:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

ఒక ప్రతిమానికి మాత్రమే శాతమానికి అందించిన విలువ హోరిజంటల్ విలువగా ఉపయోగించబడుతుంది, వెర్టికల్ విలువగా 50% అని కొనసాగిస్తుంది. ఇది కీర్తిస్తానికి పరిణతి అవుతుంది.

బ్యాక్‌గ్రౌండ్‌పోజిషన్ యొక్క డిఫాల్ట్ విలువ 0% 0% ఉంది, దాని పనితీరు టాప్ లెఫ్ట్తో సమానం. ఇది బ్యాక్‌గ్రౌండ్ చిత్రం ఎందుకు ఎల్లప్పుడూ ఎలిమెంట్ యొక్క లైనింగ్ ప్యాడ్డింగ్ కు పైకి నుండి బ్రీక్‌గ్రౌండ్‌పోజిషన్ చేయబడలేదు అని వివరిస్తుంది.

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

亲自试一试

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS 背景实例

设置背景颜色
本例演示如何为元素设置背景颜色。
టెక్స్ట్ బ్యాక్‌గ్రౌండ్ కలర్ అమర్చండి
ఈ ఉదాహరణ లో పార్టికల్ టెక్స్ట్ బ్యాక్‌గ్రౌండ్ కలర్ ఎలా అమర్చాలనేది చూపుతుంది.
బ్యాక్‌గ్రౌండ్ చిత్రాన్ని అమర్చండి
ఈ ఉదాహరణ లో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా అమర్చాలనేది చూపుతుంది.
బ్యాక్‌గ్రౌండ్ చిత్రాన్ని బ్యాక్‌గ్రౌండ్ 2 గా అమర్చండి
ఈ ఉదాహరణ లో అనేక ఎలిమెంట్స్ కు సామీప్యంగా బ్యాక్‌గ్రౌండ్ చిత్రాన్ని అమర్చాలనేది చూపుతుంది.
బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా పునరావృతం చేయాలి
ఈ ఉదాహరణ లో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా పునరావృతం చేయాలనేది చూపుతుంది.
వెర్టికల్‌గా బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా పునరావృతం చేయాలి
ఈ ఉదాహరణ లో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని వెర్టికల్‌గా పునరావృతం చేయాలనేది చూపుతుంది.
హోరిజంటల్‌గా బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా పునరావృతం చేయాలి
ఈ ఉదాహరణ లో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని హోరిజంటల్‌గా పునరావృతం చేయాలనేది చూపుతుంది.
బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా ఒక్కసారి మాత్రమే చూపించాలి
ఈ ఉదాహరణ లో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఒక్కసారి మాత్రమే చూపించాలనేది చూపుతుంది.
బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా చేయాలి
ఈ ఉదాహరణ లో పేజీలో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా చేయాలనేది చూపుతుంది.
శతకం ద్వారా బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా లొకేట్ చేయాలి
ఈ ఉదాహరణ లో పేజీలో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా శతకం ద్వారా లొకేట్ చేయాలనేది చూపుతుంది.
పిక్సెల్స్ ద్వారా బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా లొకేట్ చేయాలి
ఈ ఉదాహరణ లో పేజీలో బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా పిక్సెల్స్ ద్వారా లొకేట్ చేయాలనేది చూపుతుంది.
స్థిరమైన బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా అమర్చాలి
ఈ ఉదాహరణ లో స్థిరమైన బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా అమర్చాలనేది చూపుతుంది. చిత్రం పేజీ యొక్క ఇతర భాగాలు స్క్రోల్ అయ్యేటప్పుడు స్క్రోల్ అవుతుంది కాదు.
అన్ని బ్యాక్‌గ్రౌండ్ అట్రిబ్యూట్స్ ఒక వాక్యంలో ఉన్నాయి
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

CSS 背景属性

属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。