CSS3 图片 – 来学习啦 – 编程乐园，实战驱动的编程学习平台

CSS3 图片

天天向上

发布： 2025-02-21 23:10:43

原创

637 人浏览过

CSS3 提供了很多新的特性，可以帮助你更好地控制图片的外观和行为。无论是为图片添加滤镜、裁剪，还是设置响应式图片，都可以通过 CSS3 实现。下面是一些常用的 CSS3 图片相关的技巧和属性。

1. 背景图片 (background-image)

background-image 用于为元素设置背景图片。你可以通过 background-size、background-position 等属性来调整图片的显示效果。

示例：设置背景图片

div {
  background-image: url('image.jpg');
  background-size: cover; /* 使图片充满元素区域 */
  background-position: center center; /* 图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  height: 300px;
  width: 100%;
}

2. 背景图片的响应式设置

当我们使用背景图片时，可以利用 background-size 属性使其响应式。background-size: cover 和 background-size: contain 是常用的两个值。

cover：图片会覆盖整个元素，可能会裁剪图片的一部分，保持图片的纵横比。
contain：图片会适应元素的大小，保持图片的纵横比，但可能会留白。

示例：响应式背景图片

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
  height: 300px;
  width: 100%;
}

3. CSS3 图片滤镜 (filter)

CSS3 提供了 filter 属性来对图像应用各种效果，如模糊、亮度、对比度等。filter 属性支持多个函数，如 blur(), brightness(), contrast() 等。

常见的图片滤镜：

blur(px)：模糊效果
brightness(%)：调整亮度
contrast(%)：调整对比度
grayscale(%)：灰度效果
sepia(%)：怀旧效果
invert(%)：反转颜色

示例：应用图片滤镜

img {
  filter: grayscale(50%) brightness(1.2) blur(3px);
}

4. 圆角图片 (border-radius)

border-radius 属性可以使图片的角变圆，创建圆形或椭圆形效果。

示例：圆形图片

img {
  border-radius: 50%; /* 设置图片为圆形 */
  width: 200px;
  height: 200px;
}

5. 裁剪图片 (clip-path)

clip-path 属性可以用来裁剪图片，使其显示特定的形状，比如圆形、椭圆形、多边形等。

示例：裁剪为圆形

img {
  clip-path: circle(50%); /* 裁剪图片为圆形 */
  width: 200px;
  height: 200px;
}

示例：裁剪为多边形

img {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 裁剪为三角形 */
  width: 200px;
  height: 200px;
}

6. 响应式图片 (object-fit)

object-fit 属性用于指定图片如何适应其容器，常用于图片自适应不同屏幕和容器大小的情况。

fill：图片会被拉伸以填满整个容器，可能会导致图片的失真。
contain：图片保持纵横比并适应容器，可能会有空白。
cover：图片会填充整个容器，可能会裁剪部分内容，但不会改变图片比例。
none：图片不会改变大小。

示例：响应式图片

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使图片填充整个容器 */
}

7. 图片懒加载 (lazy loading)

CSS3 并不直接支持懒加载，但你可以使用 loading="lazy" 属性来实现图片的懒加载。此属性会在图片即将进入视口时才加载，优化页面加载速度。

示例：图片懒加载

<img src="image.jpg" alt="Image" loading="lazy">

8. 渐变背景图片 (linear-gradient, radial-gradient)

你可以使用 CSS3 的渐变背景来创建渐变效果，可以与图片一起使用，形成更丰富的背景样式。

示例：线性渐变与背景图片结合

div {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');
  background-size: cover;
  background-position: center center;
  height: 300px;
}

9. 使用 SVG 图片

SVG（可缩放矢量图形）是一种矢量格式，可以通过 CSS 控制其外观。例如，你可以为 SVG 图片设置填充颜色、边框、大小等。

示例：为 SVG 设置颜色

svg {
  fill: #3498db; /* 设置 SVG 图形的填充颜色 */
  width: 100px;
  height: 100px;
}

10. 图片与文本重叠 (background-blend-mode)

background-blend-mode 属性用于设置背景图像与背景颜色的混合模式。它可以创建非常独特的效果。

示例：图片与颜色混合

div {
  background-image: url('image.jpg');
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: overlay; /* 图片与背景颜色叠加 */
  height: 300px;
}

11. 响应式图片 (srcset & sizes)

为了优化图片加载速度，可以使用 srcset 和 sizes 属性，根据设备的屏幕分辨率选择不同的图片。srcset 可以提供多个图片源，而 sizes 可以指定不同情况下的图片显示尺寸。

示例：响应式图片

<img src="image-500.jpg" 
     srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w" 
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" 
     alt="Responsive Image">

综合示例：使用 CSS3 美化图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 图片</title>
  <style>
    .image-container {
      width: 100%;
      height: 400px;
      background-image: url('image.jpg');
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      filter: grayscale(50%) brightness(1.2);
      position: relative;
    }

    .image-container:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
      border-radius: 10px;
    }

    .image-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <div class="image-text">Beautiful Image</div>
  </div>
</body>
</html>

总结

CSS3 提供了丰富的图像处理功能，可以让你创建响应式图片、应用滤镜、裁剪图片、创建渐变效果等。结合 CSS3 的各种属性，可以大大提升网页中图片的视觉效果和用户体验。