CSS 设置图像样式
- ముంది పేజీ CSS టూల్టిప్
- తదుపరి పేజీ CSS object-fit
学习如何使用 CSS 设置图像样式。
圆角图像
使用 border-radius 属性创建圆形图像：
缩略图图像
使用 border 属性创建缩略图。
缩略图：
ఉదాహరణ
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
响应式图像
响应式图像会自动调整以适合屏幕尺寸。
如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：
ఉదాహరణ
img {
మాక్స్-వీడియుస్: 100%;
హైట్: auto;
}
提示：మా CSS RWD 教程 రెస్పాన్సివ్ వెబ్ డిజైన్ గురించి మరింత తెలుసుకోండి.
మధ్యలో ఉంచబడిన చిత్రం
చిత్రాన్ని మధ్యలో ఉంచడానికి, కనీసం పైన మరియు కింది మార్జిన్స్ ను సెట్ చేయండి: auto దానిని బ్లాక్ ఎలమెంట్ గా సెట్ చేయండి:
ఉదాహరణ
img {
డిస్ప్లే: బ్లాక్ ఎలమెంట్;
మార్జిన్ లెఫ్ట్: auto;
మార్జిన్ రైట్: auto;
వీడియుస్: 50%;
}
పోలారోయి చిత్రం / కార్డు
నీలి పుష్పం
ఎరుపు పుష్పం
ఉదాహరణ
div.polaroid {
వీడియుస్: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
పారదర్శక చిత్రం
ఆపాయిత్యం అటీబ్యూట్ విలువలు 0.0 - 1.0 వరగా ఉంటాయి. విలువ తక్కువది అంటే మరింత పారదర్శకం అవుతుంది:
ఆపాయిత్యం 0.2
ఆపాయిత్యం 0.5
ఆపాయిత్యం 1 (అప్రమేయం)
ఉదాహరణ
img {
ఆపాయిత్యం 0.5;
}
చిత్ర టెక్స్ట్
చిత్రంలో టెక్స్ట్ స్థానాన్ని ఎలా నిర్ణయించాలి:
ఉదాహరణ
స్వయంగా ప్రయత్నించండి:
ఎడమచేయి పైమూల భాగం కుడిచేయి పైమూల భాగం ఎడమచేయి ఎడమమూల భాగం కుడిచేయి కుడిమూల భాగం మధ్యలో ఉంచండి
చిత్ర ఫిల్టర్
CSS filter అటీబ్యూట్ విష్వల్ ప్రభావాలను (మేజా మరియు సాట్యాన్ని లేదా కంట్రాస్ట్ ను లేదా ప్రక్షేపణను లేదా స్పెక్ట్రం ను లేదా రంగులను లేదా మరొక విష్వల్ ప్రభావాన్ని లేదా అన్ని విష్వల్ ప్రభావాలను) ముడివేస్తుంది.
గమనిక:Internet Explorer లేదా Edge 12 ఫిల్టర్ అటీబ్యూట్ ను మద్దతు చేయలేదు.
ఉదాహరణ
చాలా చిత్రాల రంగులను కాల్చబడబడినవి (100% ముద్రలు):
img {
filter: grayscale(100%);
}
提示：మా వెబ్సైట్ ని సందర్శించండి: CSS ఫిల్టర్స్ పరిచయశాస్త్రంCSS ఫిల్టర్స్ గురించి మరింత తెలుసుకోండి.
చిత్ర హోవర్ సూపర్ ప్రెస్
మౌస్ హోవర్ సూపర్ ప్రెస్ సెఫెక్ట్ సృష్టించండి:
చిత్రం మలుపు పెట్టండి
చిత్రంపై మౌస్ ని చేరుస్తారు:
ఉదాహరణ
img:hover {
transform: scaleX(-1);
}
ప్రతిస్పందకత చిత్రకోశం
మనం CSS ద్వారా పరిమితిలేని చిత్రకోశాన్ని సృష్టించవచ్చు.
ఈ ఉదాహరణలో మీరు వివిధ స్క్రీన్ పరిమాణాలకు చిత్రాలను పునఃక్రమీకరించడానికి మీడియా క్వరీ ఉపయోగించబడింది. బ్రౌజర్ విండో పరిమాణాన్ని మార్చండి ఫలితాలను చూడండి:
ఉదాహరణ
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
提示：请在我们的 CSS RWD 教程 中学习有关响应式 Web 设计的更多知识。
图像模态（Image Modal）
这是一个演示 CSS 和 JavaScript 如何协同工作的例子。
首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。
అప్పుడు, వినియోగదారుడు చిత్రాన్ని క్లిక్ చేసినప్పుడు, జావాస్క్రిప్ట్ ఉపయోగించి మోడల్ విండోను ప్రదర్శించండి మరియు మోడల్ లోపల చిత్రాన్ని ప్రదర్శించండి:
- ముంది పేజీ CSS టూల్టిప్
- తదుపరి పేజీ CSS object-fit
