CSS background-blend-mode 属性
- 22.0 పూర్వ పేజీ
- తదుపరి పేజీ background-clip
నిర్వచనం మరియు వినియోగం
background-blend-mode అట్రిబ్యూట్ ప్రతి బ్యాక్గ్రౌండ్ ప్రాతిరుపతిని (రంగు మరియు / లేదా చిత్రం) మిశ్రమ మోడ్‌ను నిర్వచిస్తుంది.
మరియు చూడండి:
CSS శిక్షణ పాఠ్యం:CSS బ్యాక్గ్రౌండ్
ఉదాహరణ
బ్యాక్గ్రౌండ్ చిత్రం మిశ్రమ మోడ్‌ను "lighten" (కాలుష్యం) గా నిర్దేశించండి:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
పేజీ చివరన మరిన్ని TIY ఉదాహరణలను చూడండి.
CSS సంకేతాలు
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
అట్రిబ్యూట్ విలువ
| విలువ | వివరణ |
|---|---|
| normal | డిఫాల్ట్. మిశ్రమ మోడ్‌ను సాధారణంగా సెట్ చేయండి. |
| multiply | మిశ్రమ మోడ్‌ను multiply (గుణించు) గా సెట్ చేయండి. |
| screen | మిశ్రమ మోడ్‌ను screen (స్క్రీన్) గా సెట్ చేయండి. |
| overlay | మిశ్రమ మోడ్‌ను overlay (ఓవర్‌లే) గా సెట్ చేయండి. |
| darken | మిశ్రమ మోడ్‌ను overlay (ఓవర్‌లే) గా సెట్ చేయండి. |
| lighten | మిశ్రమ మోడ్‌ను lighten (కాలుష్యం) గా సెట్ చేయండి. |
| color-dodge | మిశ్రణ రీతిని color-dodge (రంగు తగ్గించడం) గా అమర్చండి |
| saturation | మిశ్రణ రీతిని saturation (సత్త్వం) గా అమర్చండి |
| color | మిశ్రణ రీతిని color (రంగు) గా అమర్చండి |
| luminosity | మిశ్రణ రీతిని luminosity (ప్రకాశం) గా అమర్చండి |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | normal |
|---|---|
| పారంపర్యం: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు లేదు. దయచేసి ఈ కి సంబంధించి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| వెర్షన్: | CSS3 |
| JavaScript సంకేతాలు: | object.style.backgroundBlendMode="screen" |
మరిన్ని ఉదాహరణలు
ఉదాహరణ
మిశ్రణ రీతిని "multiply" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
ఉదాహరణ
మిశ్రణ రీతిని "screen" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
ఉదాహరణ
మిశ్రణ రీతిని "overlay" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
ఉదాహరణ
మిశ్రణ రీతిని "darken" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
ఉదాహరణ
మిశ్రణ రీతిని "color-dodge" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
ఉదాహరణ
మిశ్రణ రీతిని "saturation" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
ఉదాహరణ
మిశ్రణ రీతిని "color" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
ఉదాహరణ
మిశ్రణ రీతిని "luminosity" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
ఉదాహరణ
మిశ్రణ రీతిని "normal" గా నిర్దేశించండి
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను పేర్కొన్నాయి。
| Chrome | Edge | Firefox | Safari | సఫారీ |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | సఫారీ |
| ఓపెరా | 35.0 | 79.0 | 30.0 | 7.1 |
- 22.0 పూర్వ పేజీ
- తదుపరి పేజీ background-clip
