CSS - 图片样式
你好，有抱负的网页设计师们！今天，我们将踏上一段激动人心的旅程，探索CSS图片样式的世界。作为你友好的计算机老师邻居，我非常高兴能引导你完成这次冒险。记住，就像学习骑自行车一样，掌握CSS需要练习，但我保证这会很有趣！
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: 0.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()">×</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