跳至主要內容

图像媒体与表单

Kpsmart2025年3月2日大约 12 分钟

图像媒体与表单

网页中的图像、媒体元素和表单控件需要特殊的样式处理。本章将介绍如何使用CSS美化这些元素。

图像样式

图像是网页中常见的元素，CSS提供了多种方式来控制图像的显示效果。

基本图像样式

img {
  /* 设置宽度和高度 */
  width: 300px;
  height: 200px;
  
  /* 保持宽高比 */
  width: 100%;
  height: auto;
  
  /* 最大宽度，响应式设计常用 */
  max-width: 100%;
  height: auto;
  
  /* 边框 */
  border: 2px solid #333;
  border-radius: 10px;
  
  /* 内边距和外边距 */
  padding: 5px;
  margin: 10px;
  
  /* 显示模式 */
  display: block; /* 块级元素，前后换行 */
  display: inline; /* 内联元素，不换行 */
}

图像对齐

img {
  /* 水平对齐 */
  margin-left: auto;
  margin-right: auto;
  display: block; /* 居中必须是块级元素 */
  
  /* 使用浮动 */
  float: left; /* 左浮动 */
  float: right; /* 右浮动 */
  margin: 0 10px 10px 0; /* 添加间距 */
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

图像滤镜

CSS滤镜可以为图像添加视觉效果。

img {
  /* 单个滤镜 */
  filter: grayscale(100%); /* 灰度 */
  filter: blur(5px); /* 模糊 */
  filter: brightness(150%); /* 亮度 */
  filter: contrast(200%); /* 对比度 */
  filter: hue-rotate(90deg); /* 色相旋转 */
  filter: invert(100%); /* 反色 */
  filter: opacity(50%); /* 透明度 */
  filter: saturate(200%); /* 饱和度 */
  filter: sepia(100%); /* 褐色 */
  
  /* 组合滤镜 */
  filter: contrast(150%) brightness(120%);
  
  /* 悬停效果 */
  transition: filter 0.3s;
}

img:hover {
  filter: brightness(120%) saturate(150%);
}

图像裁剪和形状

img {
  /* 圆形图像 */
  border-radius: 50%;
  
  /* 椭圆形图像 */
  border-radius: 50% / 70%;
  
  /* 使用clip-path裁剪为各种形状 */
  clip-path: circle(40%); /* 圆形 */
  clip-path: ellipse(40% 30% at 50% 50%); /* 椭圆 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 菱形 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* 复杂形状 */
}

图像精灵

图像精灵（CSS Sprites）是一种将多个小图像合并到一个大图像中的技术，可以减少HTTP请求数量。

.icon {
  background-image: url('sprites.png');
  width: 24px;
  height: 24px;
  display: inline-block;
}

.icon-home {
  background-position: 0 0;
}

.icon-search {
  background-position: -24px 0;
}

.icon-settings {
  background-position: -48px 0;
}

响应式图像

.responsive-img {
  max-width: 100%;
  height: auto;
}

/* 使用媒体查询调整图像大小 */
@media (max-width: 768px) {
  .hero-image {
    height: 200px;
  }
}

/* 使用picture元素和srcset属性可以在HTML中实现更高级的响应式图像 */

图像替换技术

当需要使用图像替换文本，但又要保持文本的可访问性时：

.image-replacement {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  
  /* 隐藏文本但保持可访问性 */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  
  /* 或者使用这种方法 */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

媒体元素样式

视频样式

video {
  /* 基本尺寸 */
  width: 100%;
  max-width: 800px;
  height: auto;
  
  /* 边框和圆角 */
  border: 2px solid #333;
  border-radius: 8px;
  
  /* 对象适应方式 */
  object-fit: cover; /* 填充容器，可能裁剪内容 */
  object-fit: contain; /* 完整显示，可能有空白 */
  
  /* 对象位置 */
  object-position: center; /* 居中 */
  object-position: top left; /* 左上角 */
}

/* 自定义控制器样式 */
video::-webkit-media-controls {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 响应式视频容器 */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比例 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

音频样式

audio {
  width: 100%;
  max-width: 500px;
}

/* 自定义音频控制器 */
audio::-webkit-media-controls-panel {
  background-color: #f0f0f0;
}

audio::-webkit-media-controls-play-button {
  background-color: #333;
  border-radius: 50%;
}

表单样式

表单元素通常有浏览器默认样式，可以使用CSS自定义它们的外观。

表单布局

form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* 内联表单 */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.form-inline .form-group {
  margin-right: 10px;
}

输入框样式

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
textarea:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
  outline: none;
}

/* 禁用状态 */
input:disabled,
textarea:disabled {
  background-color: #f2f2f2;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 只读状态 */
input:read-only,
textarea:read-only {
  background-color: #f9f9f9;
}

/* 占位符文本 */
::placeholder {
  color: #999;
  font-style: italic;
}

复选框和单选按钮

/* 基本样式 */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 5px;
}

/* 自定义复选框和单选按钮 */
.custom-checkbox,
.custom-radio {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
  line-height: 20px;
}

.custom-checkbox input,
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 4px;
}

.custom-radio .checkmark {
  border-radius: 50%;
}

.custom-checkbox:hover input ~ .checkmark,
.custom-radio:hover input ~ .checkmark {
  background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark,
.custom-radio input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after,
.custom-radio input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-radio .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

选择框样式

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  appearance: none; /* 移除默认样式 */
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

select:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
  outline: none;
}

/* 多选选择框 */
select[multiple] {
  height: auto;
  padding: 5px;
  background-image: none;
}

select[multiple] option {
  padding: 5px;
}

按钮样式

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #357ab8;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  background-color: #2a5d8f;
}

/* 禁用状态 */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 次要按钮 */
.button-secondary {
  background-color: #f2f2f2;
  color: #333;
  border: 1px solid #ddd;
}

.button-secondary:hover {
  background-color: #e6e6e6;
}

/* 危险按钮 */
.button-danger {
  background-color: #e74c3c;
}

.button-danger:hover {
  background-color: #c0392b;
}

表单验证样式

/* 有效输入 */
input:valid {
  border-color: #2ecc71;
}

/* 无效输入 */
input:invalid {
  border-color: #e74c3c;
}

/* 仅在用户交互后显示验证样式 */
input:not(:placeholder-shown):invalid {
  border-color: #e74c3c;
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* 必填字段标记 */
label.required:after {
  content: " *";
  color: #e74c3c;
}

文件上传按钮

input[type="file"] {
  /* 隐藏默认按钮 */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* 自定义文件上传按钮 */
.file-upload-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.file-upload-label:hover {
  background-color: #357ab8;
}

/* 显示所选文件名 */
.file-name {
  margin-left: 10px;
  font-style: italic;
}

范围滑块

input[type="range"] {
  width: 100%;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
}

/* 滑块轨道 */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
}

/* 滑块拇指 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: #4a90e2;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* 居中拇指 */
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
}

日期和时间选择器

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
}

/* 自定义日历图标 */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/></svg>');
  cursor: pointer;
}

颜色选择器

input[type="color"] {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

/* 扩展颜色选择器 */
.color-picker-wrapper {
  position: relative;
  display: inline-block;
}

.color-picker-wrapper input[type="color"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.color-preview {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

实例：响应式图像画廊

<!DOCTYPE html>
<html>
<head>
  <title>响应式图像画廊</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
      background-color: #f4f4f4;
    }
    
    .gallery {
      display: flex;
      flex-wrap: wrap;
      margin: -10px;
    }
    
    .gallery-item {
      flex: 1 0 300px;
      margin: 10px;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .gallery-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .gallery-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s;
    }
    
    .gallery-item:hover .gallery-image {
      transform: scale(1.1);
    }
    
    .gallery-caption {
      padding: 15px;
      background-color: white;
    }
    
    .gallery-title {
      font-size: 18px;
      margin-bottom: 5px;
    }
    
    .gallery-description {
      color: #666;
      font-size: 14px;
    }
    
    @media (max-width: 768px) {
      .gallery-item {
        flex: 1 0 100%;
      }
    }
  </style>
</head>
<body>
  <h1>响应式图像画廊</h1>
  
  <div class="gallery">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/600x400/3498db/ffffff" alt="图像1" class="gallery-image">
      <div class="gallery-caption">
        <h3 class="gallery-title">图像标题1</h3>
        <p class="gallery-description">这是第一张图像的描述文本。</p>
      </div>
    </div>
    
    <div class="gallery-item">
      <img src="https://via.placeholder.com/600x400/e74c3c/ffffff" alt="图像2" class="gallery-image">
      <div class="gallery-caption">
        <h3 class="gallery-title">图像标题2</h3>
        <p class="gallery-description">这是第二张图像的描述文本。</p>
      </div>
    </div>
    
    <div class="gallery-item">
      <img src="https://via.placeholder.com/600x400/2ecc71/ffffff" alt="图像3" class="gallery-image">
      <div class="gallery-caption">
        <h3 class="gallery-title">图像标题3</h3>
        <p class="gallery-description">这是第三张图像的描述文本。</p>
      </div>
    </div>
    
    <div class="gallery-item">
      <img src="https://via.placeholder.com/600x400/f39c12/ffffff" alt="图像4" class="gallery-image">
      <div class="gallery-caption">
        <h3 class="gallery-title">图像标题4</h3>
        <p class="gallery-description">这是第四张图像的描述文本。</p>
      </div>
    </div>
  </div>
</body>
</html>

实例：自定义表单

<!DOCTYPE html>
<html>
<head>
  <title>自定义表单</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
      background-color: #f4f4f4;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #555;
    }
    
    label.required:after {
      content: " *";
      color: #e74c3c;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
      outline: none;
    }
    
    .checkbox-group,
    .radio-group {
      margin-bottom: 10px;
    }
    
    .custom-checkbox,
    .custom-radio {
      position: relative;
      padding-left: 30px;
      cursor: pointer;
      display: block;
      margin-bottom: 8px;
    }
    
    .custom-checkbox input,
    .custom-radio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    
    .checkmark {
      position: absolute;
      top: 2px;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
      border-radius: 4px;
      transition: background-color 0.2s;
    }
    
    .custom-radio .checkmark {
      border-radius: 50%;
    }
    
    .custom-checkbox:hover input ~ .checkmark,
    .custom-radio:hover input ~ .checkmark {
      background-color: #ccc;
    }
    
    .custom-checkbox input:checked ~ .checkmark,
    .custom-radio input:checked ~ .checkmark {
      background-color: #4a90e2;
    }
    
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    .custom-checkbox input:checked ~ .checkmark:after,
    .custom-radio input:checked ~ .checkmark:after {
      display: block;
    }
    
    .custom-checkbox .checkmark:after {
      left: 7px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    
    .custom-radio .checkmark:after {
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
    }
    
    .form-row {
      display: flex;
      margin: 0 -10px;
    }
    
    .form-col {
      flex: 1;
      padding: 0 10px;
    }
    
    .btn {
      display: inline-block;
      padding: 12px 24px;
      background-color: #4a90e2;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .btn:hover {
      background-color: #357ab8;
    }
    
    .btn-secondary {
      background-color: #f2f2f2;
      color: #333;
      border: 1px solid #ddd;
    }
    
    .btn-secondary:hover {
      background-color: #e6e6e6;
    }
    
    .form-actions {
      text-align: right;
      margin-top: 30px;
    }
    
    .form-actions .btn {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>联系我们</h1>
    
    <form>
      <div class="form-row">
        <div class="form-col">
          <div class="form-group">
            <label class="required" for="first-name">名字</label>
            <input type="text" id="first-name" placeholder="请输入您的名字" required>
          </div>
        </div>
        
        <div class="form-col">
          <div class="form-group">
            <label class="required" for="last-name">姓氏</label>
            <input type="text" id="last-name" placeholder="请输入您的姓氏" required>
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="required" for="email">电子邮箱</label>
        <input type="email" id="email" placeholder="请输入您的电子邮箱" required>
      </div>
      
      <div class="form-group">
        <label for="subject">主题</label>
        <select id="subject">
          <option value="" disabled selected>请选择主题</option>
          <option value="general">一般咨询</option>
          <option value="support">技术支持</option>
          <option value="feedback">反馈建议</option>
          <option value="other">其他</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="message">留言</label>
        <textarea id="message" rows="5" placeholder="请输入您的留言"></textarea>
      </div>
      
      <div class="form-group">
        <label>兴趣爱好</label>
        <div class="checkbox-group">
          <label class="custom-checkbox">
            设计
            <input type="checkbox" name="interests" value="design">
            <span class="checkmark"></span>
          </label>
          
          <label class="custom-checkbox">
            开发
            <input type="checkbox" name="interests" value="development">
            <span class="checkmark"></span>
          </label>
          
          <label class="custom-checkbox">
            营销
            <input type="checkbox" name="interests" value="marketing">
            <span class="checkmark"></span>
          </label>
        </div>
      </div>
      
      <div class="form-group">
        <label>如何了解我们</label>
        <div class="radio-group">
          <label class="custom-radio">
            搜索引擎
            <input type="radio" name="source" value="search">
            <span class="checkmark"></span>
          </label>
          
          <label class="custom-radio">
            社交媒体
            <input type="radio" name="source" value="social">
            <span class="checkmark"></span>
          </label>
          
          <label class="custom-radio">
            朋友推荐
            <input type="radio" name="source" value="referral">
            <span class="checkmark"></span>
          </label>
        </div>
      </div>
      
      <div class="form-actions">
        <button type="reset" class="btn btn-secondary">重置</button>
        <button type="submit" class="btn">提交</button>
      </div>
    </form>
  </div>
</body>
</html>

总结

在本章中，我们学习了：

  1. 图像样式

    • 基本图像样式（尺寸、边框、对齐等）
    • 图像滤镜效果
    • 图像裁剪和形状
    • 图像精灵技术
    • 响应式图像
    • 图像替换技术

  2. 媒体元素样式

    • 视频样式（尺寸、边框、对象适应等）
    • 音频样式
    • 响应式媒体容器

  3. 表单样式

    • 表单布局
    • 输入框样式
    • 复选框和单选按钮样式
    • 选择框样式
    • 按钮样式
    • 表单验证样式
    • 特殊表单元素（文件上传、范围滑块、日期选择器等）

  4. 实例应用

    • 响应式图像画廊
    • 自定义表单

这些技术可以帮助你创建美观、用户友好的网页元素，提升用户体验。

练习

  1. 创建一个带有滤镜效果的图像画廊，当鼠标悬停时应用不同的滤镜效果
  2. 设计一个响应式视频播放页面，包含自定义控制器
  3. 创建一个完整的联系表单，包含各种类型的输入字段和自定义样式
  4. 实现一个图像裁剪为不同形状的展示页面
  5. 设计一个带有自定义文件上传按钮的表单

进一步学习