繁體中文

CSS 教學

CSS3教學

CSS 高級

CSS 參考手冊

CSS 响應式

CSS - 圖片樣式

你好，有抱負的網頁設計師們！今天，我們將踏上一段令人興奮的旅程，探索 CSS 圖片樣式的世界。作為你們友好的鄰居電腦老師，我非常高興能夠指導你們這次冒險。記住，正如學習騎自行車一樣，精通 CSS 需要練習，但我保證這會很好玩！

CSS - Style Images

CSS 圖片樣式 - 圓角圖片

讓我們從一些簡單而優雅的東西開始：圓角圖片。你知道我們在生活中多麼喜歡柔化邊緣嗎？我們也可以對我們的圖片做同樣的事情！

<img src="cute_puppy.jpg" alt="一隻可愛的小狗" class="rounded-image">
.rounded-image {
border-radius: 25px;
}

在這個例子中，我們告訴瀏覽器將我們圖片的角落圓化 25 像素。這就像給你的圖片理了一個小發型！你可以調整這個值來讓角落更加或更少圓化。

CSS 圖片樣式 - 圓形圖片

現在，讓我們進一步將我們的圖片轉變成完美的圓形。這對於個人頭像或任何你想聚焦中心的圖片都非常棒。

<img src="profile_pic.jpg" alt="個人頭像" class="circle-image">
.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}

這裡就是魔術發生的地方：border-radius: 50% 將我們的方形圖片變成了圓形。我們設置了一個固定的寬度和高度，而 object-fit: cover 確保圖片在不拉伸的情況下填滿圓形。

CSS 圖片樣式 - 缩略圖

縮略圖就像是圖片世界的電影預告 - 小小的預覽，讓你品嚐到完整圖片的風味。讓我們來創造一些！

<img src="landscape.jpg" alt="美麗風光" class="thumbnail">
.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}

這個 CSS 創造了一個小巧的方形縮略圖，帶有一個整齊的邊框。object-fit: cover 屬性確保圖片在不失真的情況下填滿縮略圖區域。

CSS 圖片樣式 - 縮略圖作為鏈接

讓我們讓縮略圖可點擊！這對於圖片庫或產品列表來說非常完美。

<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="點擊放大" class="thumbnail-link">
</a>
.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}

.thumbnail-link:hover {
transform: scale(1.1);
}

我們在這裡添加了一個很酷的懸停效果。當你將鼠標悬停在上面時，縮略圖會稍微放大，給人一種互動的感覺。

CSS 圖片樣式 - 响應式圖片

在當今多設備的世界中，我們需要我們的圖片在任何屏幕尺寸上都能看起來很好。讓我們讓圖片響應式！

<img src="scenery.jpg" alt="美麗風光" class="responsive-image">
.responsive-image {
max-width: 100%;
height: auto;
}

這個簡單的 CSS 確保我們的圖片永遠不會比它的容器更寬，並且高度會相應調整。這就像有一個知道如何在任何情況下表現的圖片！

CSS 圖片樣式 - 中心對齊圖片

將圖片居中可以很棘手，但我有一個簡單的技巧。這就像教你的圖片站在舞台中央一樣！

<div class="image-container">
<img src="centered_image.jpg" alt="居中的圖片" class="center-image">
</div>
.image-container {
text-align: center;
}

.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

這種方法對於內聯和块级圖片都有效。容器上的 text-align: center 有助於內聯圖片的對齊，而 margin: auto 則使块级圖片居中。

CSS 圖片樣式 - 實體照片 / 卡片

記得寶麗來相機嗎？讓我們用 CSS 重現那種經典風格！

<div class="polaroid">
<img src="vacation.jpg" alt="度假回憶">
<div class="caption">2023年夏天</div>
</div>
.polaroid {
width: 250px;
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);
margin-bottom: 25px;
}

.polaroid img {
width: 100%;
}

.caption {
text-align: center;
padding: 10px 20px;
}

這個 CSS 在圖片周圍創造了一個白色邊框，並添加了一個微妙的陰影，產生 3D 效果。文字說明位於圖片下方，就像真正的寶麗來一樣！

CSS 圖片樣式 - 透明圖片

有時候，我們希望我們的圖片是透明的。這就像給你的圖片一種幽靈般的質感！

<img src="logo.png" alt="公司標誌" class="transparent-image">
.transparent-image {
opacity: 0.5;
}

opacity 屬性的範圍從 0（完全透明）到 1（完全不透明）。你可以調整這個值來得到所需的透明度。

CSS 圖片樣式 - 圖片中間文字

讓我們在圖片的正中央放一些文字。這就像創造你自己的勵志海報一樣！

<div class="image-text-container">
<img src="background.jpg" alt="背景圖片">
<div class="centered-text">你的文字這裡</div>
</div>
.image-text-container {
position: relative;
text-align: center;
color: white;
}

.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這個 CSS 使用定位將文字精確地放在圖片的中心。transform 屬性確保它水平和垂直居中。

CSS 圖片樣式 - 濾鏡

CSS 濾鏡就像是 Instagram 為你的網頁圖片。讓我們來玩一玩！

<img src="landscape.jpg" alt="風光" class="filtered-image">
.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}

這個例子應用了多個濾鏡：它將圖片轉為灰度，增加亮度，並提升對比度。你可以混合和匹配不同的濾鏡來創造獨特的效果！

這裡有一些常見的 CSS 圖片濾鏡：

濾鏡 描述 示例
grayscale() 將圖片轉為灰度 filter: grayscale(100%);
sepia() 將圖片轉為棕色 filter: sepia(60%);
saturate() 提高圖片的飽和度 filter: saturate(200%);
hue-rotate() 應用色相旋轉 filter: hue-rotate(90deg);
invert() 反轉圖片的顏色 filter: invert(75%);
opacity() 設置圖片的透明度 filter: opacity(25%);
brightness() 調整亮度 filter: brightness(150%);
contrast() 調整對比度 filter: contrast(200%);
blur() 應用模糊效果 filter: blur(5px);

CSS 圖片樣式 - 淡入遮罩

讓我們創造一個效果，當你悬停在一張圖片上時，文字會淡入。這就像揭示一個秘密信息！

<div class="image-overlay">
<img src="product.jpg" alt="產品圖片">
<div class="overlay">
<div class="text">產品描述</div>
</div>
</div>
.image-overlay {
position: relative;
width: 50%;
}

.image-overlay img {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-overlay:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

這個 CSS 創造了一個黑色遮罩，當你悬停圖片上時會淡入，揭示文字。

CSS 圖片樣式 - 滑入效果

現在，讓我們為圖片說明創造一個滑入效果。這就像拉開一幅簾幕，揭示節目的明星！

<div class="slide-container">
<img src="nature.jpg" alt="自然風光" class="slide-image">
<div class="slide-caption">美麗的自然</div>
</div>
.slide-container {
position: relative;
overflow: hidden;
}

.slide-image {
display: block;
width: 100%;
height: auto;
}

.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}

.slide-container:hover .slide-caption {
left: 0;
}

這個 CSS 隱藏了說明文字，當你悬停圖片上時會從右邊滑入。

CSS 圖片樣式 - 翻轉效果

讓我們添加一個翻轉效果！這就像給你的圖片一張後台通行證，展示它的反面。

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="正面">
</div>
<div class="back">
<img src="back.jpg" alt="反面">
</div>
</div>
</div>
.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}

.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.flip-container:hover .flipper {
transform: rotateY(180deg);
}

.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.back {
transform: rotateY(180deg);
}

這個 CSS 創造了一個 3D 翻轉效果，當你悬停容器上時會翻轉以顯示背面的圖片。

CSS 圖片樣式 - 响應式圖片庫

讓我們把我們的技能合在一起，創建一個響應式圖片庫。這就像策劃你自己的小型藝術展覽！

<div class="gallery">
<img src="img1.jpg" alt="圖庫圖片 1">
<img src="img2.jpg" alt="圖庫圖片 2">
<img src="img3.jpg" alt="圖庫圖片 3">
<img src="img4.jpg" alt="圖庫圖片 4">
</div>
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}

@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}

這個 CSS 創造了一個可伸縮的圖庫，會根據屏幕尺寸調整。在小屏幕上，圖片垂直堆疊。在中型屏幕上，它們形成兩列，而在大型屏幕上，它們形成四列。

CSS 圖片樣式 - 圖片模态

最後，讓我們創建一個在點擊圖片時彈出的模態。這就像給你的圖片一個自己的聚光燈時刻！

<img src="thumbnail.jpg" alt="點擊放大" class="modal-trigger" onclick="openModal(this)">

<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modalImage">
</div>
.modal-trigger {
cursor: pointer;
transition: 0.3s;
}

.modal-trigger:hover {opacity: 0.7;}

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}

function closeModal() {
document.getElementById("imageModal").style.display = "none";
}

這個 HTML、CSS 和 JavaScript 的組合創造了一個在點擊圖片時打開的模態，顯示一個更大的圖片版本。

而且，那就是它，夥伴們！我們已經穿越了 CSS 圖片樣式的奇妙世界。記住，精通這些技巧的關鍵是練習。所以，請隨意玩轉這些例子，混合和匹配，創造屬於你自己的獨特作品。快樂編程！

Credits: Image by storyset

上一教程:
CSS - 形狀
下一教程:
CSS - 優先序