假设我们有一个HTML结构：

<div class="image-container">
    <img src="your-image-url.jpg" alt="示例图片">
</div>

接下来是CSS部分。为了实现淡入效果，我们可以使用CSS的过渡（transition）属性。过渡允许我们在两个状态之间平滑地改变样式。

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.image-container img.active {
    opacity: 1;
}

在上述代码中，我们首先设置图片的初始不透明度为0，即完全透明。然后，通过设置过渡属性，当图片的类名发生变化（添加了.active类）时，不透明度会在2秒内以渐入渐出的效果从0变为1，从而实现淡入效果。

如果想要实现淡出效果，可以通过JavaScript动态地移除.active类。例如：

const img = document.querySelector('.image-container img');
setTimeout(() => {
    img.classList.remove('active');
}, 3000);

这段JavaScript代码会在3秒后移除图片的.active类，使得图片的不透明度从1变回0，实现淡出效果。

还可以通过CSS动画（animation）属性来实现更复杂的淡入淡出效果。通过定义关键帧，可以精确控制动画的过程。

@keyframes fade-in-out {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.image-container img {
    animation: fade-in-out 5s linear infinite;
}

这段代码定义了一个名为fade-in-out的动画，图片会在5秒内无限循环地执行淡入淡出的动画效果。

通过合理运用CSS的opacity、transition和animation属性，我们可以为网页图片添加丰富多样的淡入淡出效果，提升网页的视觉吸引力和用户体验。