CSS అనుప్రయోగం / పారదర్శకత
opacity అంశం వినియోగదారు అంశం అనుప్రయోగాన్ని / పారదర్శకతను నిర్ణయిస్తుంది.
పారదర్శక చిత్రం
opacity అంశం యొక్క విలువలు 0.0-1.0 మధ్య ఉంటాయి. విలువ తక్కువది అనుప్రయోగం తక్కువగా ఉంటుంది:
opacity 0.2
opacity 0.5
opacity 1
ఉదాహరణ
img {
opacity: 0.5;
}
పారదర్శక హోవర్ ప్రభావం
opacity అంశం సాధారణంగా :hover ఈ సెలెక్టర్స్ ను కలిపి ఉపయోగించి, మౌస్ అంచున అనుప్రయోగాన్ని మార్చవచ్చు:
ఉదాహరణ
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
例子解释
మొదటి CSS బ్లాక్ ఉదాహరణ 1 లో ఉన్న కోడ్ వంటిది. అలాగే, మేము వినియోగదారులు ఒక చిత్రం పైన మౌస్ అంచున వస్తే జరిగే ప్రభావాన్ని కూడా జోడించాము. ఈ పరిస్థితిలో, వినియోగదారులు చిత్రం పైన మౌస్ అంచున వస్తే, చిత్రం అనుప్రయోగం అని మేము కోరుకున్నాము. ఈ CSS ఉంది opacity:1;.
మౌస్ పింటర్ చిత్రం నుండి బయటకు వెళ్ళినప్పుడు, చిత్రం మళ్ళీ పారదర్శకం అవుతుంది.
విలోమ హోవర్ ప్రభావం ఉదాహరణ:
ఉదాహరణ
img:hover {
opacity: 0.5;
}
పారదర్శక పెట్టె
ఉపయోగించండి opacity అనుపాదన స్పందనతో సంబంధించిన అనుపాదన స్పందనలు ఉపయోగించినప్పుడు, పారదర్శకత కలిగిన పిల్లల లోపల టెక్స్ట్ చదవడం చాలా కష్టం కావచ్చు:
ఉదాహరణ
div {
opacity: 0.3;
}
RGBA పారదర్శకత ఉపయోగం
మీరు ఉపయోగించదు ఉంటే, ముందుకు ఉన్న ఉదాహరణలో పిల్లల పారదర్శకతను ఉపయోగించదు, RGBA రంగులను ఉపయోగించండి. క్రింది ఉదాహరణలో బ్యాక్‌గ్రౌండ్ రంగును పారదర్శకతను పారదర్శకతలో ఉపయోగించడం లేదు:
మీరు మా CSS 颜色 ఈ భాగంలో RGBఎ రంగులపై మరింత తెలుసుకున్నాము. RGBఎ రంగులతో పాటు, RGBఎ రంగులను ఆల్ఫా చానల్ (RGBA) తో కలిపి ఉపయోగించవచ్చు - ఈ చానల్ రంగు అనుప్రయోగతను నిర్ణయిస్తుంది.
RGBA రంగుల విలువలు రూపొందించబడతాయి: rgba(ఎరుపు, హరితం, నీలం, ఆల్ఫా) ఆల్ఫా పారదర్శకత పారామీటర్లు 0.0 (పూర్తి పారదర్శకత) మరియు 1.0 (పూర్తి అనుప్రయోగత) మధ్య ఉన్న సంఖ్యలు.
సూచన:మా CSS 颜色 ఈ భాగంలో RGBఎ రంగులపై మరింత తెలుసుకున్నాము.
ఉదాహరణ
div {
background: rgba(76, 175, 80, 0.3) /* అనుప్రయోగంలో ఉన్న గ్రీన్ బ్యాక్‌గ్రౌండ్ నికరాధారం 30% */
}
పారదర్శక పెట్టెలో ఉన్న టెక్స్ట్
పారదర్శక పెట్టెలో ఉన్న టెక్స్ట్ ఉంది.
ఉదాహరణ
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
这是一些位于透明框中的文本。