CSS 图片廊

在网页开发中，图片廊是常见的展示图片的方式。通过 CSS 可以实现多种不同样式的图片廊效果，让网页看起来更加美观和吸引人。在本章节中，我们将介绍如何使用 CSS 创建不同风格的图片廊。

基本图片廊

首先，我们来创建一个基本的图片廊，展示多张图片并在鼠标悬停时显示图片标题。我们可以使用 flexbox 布局来实现这个效果。

// www.javascriptcn.com code example
<div class="gallery">
    <div class="image">
        <img src="image1.jpg" alt="Image 1">
        <div class="title">Image 1</div>
    </div>
    <div class="image">
        <img src="image2.jpg" alt="Image 2">
        <div class="title">Image 2</div>
    </div>
    <div class="image">
        <img src="image3.jpg" alt="Image 3">
        <div class="title">Image 3</div>
    </div>
</div>

// www.javascriptcn.com code example
.gallery {
    display: flex;
    justify-content: space-around;
}

.image {
    position: relative;
    margin: 10px;
}

.image img {
    width: 100%;
    height: auto;
}

.title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    text-align: center;
    display: none;
}

.image:hover .title {
    display: block;
}

在上面的代码中，我们使用 flexbox 布局将图片水平排列，并在鼠标悬停时显示图片标题。可以根据实际需求修改样式和布局。

网格图片廊

除了基本的图片廊外，我们还可以创建一个网格布局的图片廊，展示更多的图片，并且在不同屏幕尺寸下自适应布局。

// www.javascriptcn.com code example
<div class="grid-gallery">
    <div class="image">
        <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="image">
        <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="image">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="image">
        <img src="image4.jpg" alt="Image 4">
    </div>
    <div class="image">
        <img src="image5.jpg" alt="Image 5">
    </div>
    <div class="image">
        <img src="image6.jpg" alt="Image 6">
    </div>
</div>

// www.javascriptcn.com code example
.grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
}

.image {
    position: relative;
}

.image img {
    width: 100%;
    height: auto;
}

在上面的代码中，我们使用 grid 布局创建一个网格图片廊，图片会自动适应不同屏幕尺寸的布局。可以根据实际需求修改网格布局的列数和间距。

希望通过本章节的介绍，你能够了解如何使用 CSS 创建不同样式的图片廊，并在实际项目中应用这些技巧。