सीएसएस पृष्ठभूमि-मिश्रण-मोड संपत्ति
उदाहरण
पृष्ठभूमि-छवि के सम्मिश्रण मोड को "हल्का" करने के लिए निर्दिष्ट करें:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
background-blend-mode
संपत्ति प्रत्येक पृष्ठभूमि परत (रंग और/या छवि) के सम्मिश्रण मोड को परिभाषित करती है ।
डिफ़ॉल्ट मान: | साधारण |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.backgroundBlendMode="screen" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
सीएसएस सिंटेक्स
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
और ज्यादा उदाहरण
उदाहरण
सम्मिश्रण मोड को "गुणा" करने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
उदाहरण
सम्मिश्रण मोड को "स्क्रीन" होने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
उदाहरण
सम्मिश्रण मोड को "ओवरले" होने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
उदाहरण
सम्मिश्रण मोड को "डार्क" करने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
उदाहरण
"रंग-चकमा" होने के लिए सम्मिश्रण मोड निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
उदाहरण
सम्मिश्रण मोड को "संतृप्ति" के रूप में निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
उदाहरण
सम्मिश्रण मोड को "रंग" के रूप में निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
उदाहरण
सम्मिश्रण मोड को "चमकदार" होने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
उदाहरण
सम्मिश्रण मोड को "सामान्य" होने के लिए निर्दिष्ट करें:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस पृष्ठभूमि