Στυλ εικόνας CSS
- 上一页 CSS 工具提示
- 下一页 CSS object-fit
Μάθε πώς να χρησιμοποιείς το CSS για να ρυθμίσεις τα στυλ εικόνας.
Κυκλικές εικόνες
χρησιμοποιώντας border-radius ιδιότητες δημιουργίας κυκλικών εικόνων:
εικόνα εικόνας
χρησιμοποιώντας border ιδιότητες δημιουργίας εικόνας εικόνας.
Εικόνα εικόνας:
παράδειγμα
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
Ανταποκρίσιμες εικόνες
Οι ανταποκρίσιμες εικόνες προσαρμόζονται αυτόματα για να ταιριάζουν στο μέγεθος του οθόνης.
Αν θέλεις να μειώσεις το μέγεθος της εικόνας ανάλογα με τις ανάγκες σου, αλλά να αποφύγεις την επέκταση πάνω από το αρχικό μέγεθος, προσθέσε τον παρακάτω κώδικα:
παράδειγμα
img {
max-width: 100%;
height: auto;
}
提示：Στο CSS RWD 教程 Μάθε περισσότερα για την ανταποκρίσιμη σχεδίαση ιστοσελίδων.
Κεντρική εικόνα
Για να τοποθετήσεις το εικόνα στο κέντρο, ρύθμισε τα αριστερά και δεξιά περιθώρια: auto Και να το ρυθμίσεις ως στοιχείο κειμένου:
παράδειγμα
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Φωτογραφία Polaroid / Κάρτα
Κίτρινη τρούφα
Κόκκινη τρούφα
παράδειγμα
div.polaroid {
width: 80%;
background-color: white;
σκιά κουτί: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {πλάτος: 100%}
div.container {
υπόγραμμιση κειμένου: κεντρικά;
παδάκι: 10px 20px;
}
Διαφανείς εικόνες
διαφάνεια Η τιμή της ιδιότητας διαφάνεια είναι από 0.0 έως 1.0. Η χαμηλότερη τιμή είναι πιο διαφανής:
διαφάνεια 0.2
διαφάνεια 0.5
διαφάνεια 1 (προεπιλεγμένο)
παράδειγμα
img {
διαφάνεια: 0.5;
}
Κείμενο εικόνας
Πώς να τοποθετήσετε κείμενο μέσα σε εικόνα:
παράδειγμα
Προσπαθήστε να το δοκιμάσετε προσωπικά:
Πάνω αριστερά Πάνω δεξιά Κατώτερα αριστερά Κατώτερα δεξιά Κεντρικά
Φίλτρα εικόνας
CSS φίλτρο Η ιδιότητα προσθέτει οπτικές ενέργειες (όπως θολότητα και σaturaση) στο στοιχείο.
Σημείωση:Το Internet Explorer ή το Edge 12 δεν υποστηρίζει την ιδιότητα filter.
παράδειγμα
Αλλάξτε τον χρώμα όλων των εικόνων σε μαύρο και λευκό (100% γκρίζο):
img {
φίλτρο: grayscale(100%);
}
提示：Επισκεφθείτε το Εγχειρίδιο αναφοράς φίλτρων CSSΓια περισσότερες πληροφορίες σχετικά με τους φίλτρα CSS.
Επιπλέον επίπεδο εικόνας κουμπώνου
Δημιουργία επιπλέον επιπέδων όταν το ποντίκι κουμπώνει:
Επιστροφή εικόνας
Περιηγήστε το ποντίκι σας στην εικόνα:
παράδειγμα
img:hover {
μετατροπή: scaleX(-1);
}
Απανταγωνιστική συλλογή εικόνων
Μπορούμε να δημιουργήσουμε μια προσαρμοστική συλλογή εικόνων με το CSS.
Αυτό το παράδειγμα χρησιμοποιεί την ερώτηση των μέσων για να επαναδιατάξει τις εικόνες σε διαφορετικά μεγέθη οθόνης. Αλλάξτε το μέγεθος του παραθύρου του περιηγητή σας για να δείτε τα αποτελέσματα:
παράδειγμα
.responsive {
παδάκι: 0 6px;
πολίτευσις: αριστερά;
πλάτος: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
πλάτος: 49.99999%;
μαρζίν: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
提示：請在我們的 CSS RWD 教程 中學習有關響應式 Web 對設計的更多知識。
圖像模態（Image Modal）
這是一個演示 CSS 和 JavaScript 如何協同工作的例子。
首先，請使用 CSS 創建模態窗口（對話框），並默認將其隱藏。
然後，當用戶單擊圖像時，使用 JavaScript 顯示模態窗口並在模態內部顯示圖像：
- 上一页 CSS 工具提示
- 下一页 CSS object-fit
