css 获取焦点图片缩放

在CSS中，可以使用`:focus`伪类选择器来为拥有焦点的元素应用特定的样式。如果你想要在图片获得焦点时实现缩放效果，可以通过调整图片的`transform`属性来实现。下面是一个简单的例子，展示了如何为图片设置在获得焦点时的缩放效果：

img {
  transition: transform 0.3s ease; /* 添加平滑的过渡效果 */
}

img:focus {
  transform: scale(1.1); /* 放大图片，1.1表示放大10% */
}

在这个例子中，当图片获得焦点时，它会通过`transform: scale(1.1);`放大10%。`transition`属性确保了缩放的变化过程是平滑的。

需要注意的是，并不是所有的图片都会自然地获得焦点。通常，为了使图片能够获得焦点并触发`:focus`伪类，可能需要给`img`标签添加`tabindex`属性，使其可以被键盘导航选中。

<img src="example.jpg" tabindex="0" />

添加`tabindex="0"`后，图片可以通过键盘的Tab键获得焦点。

相关问题

css 获取焦点改变颜色

以下是使用CSS获取焦点改变颜色的方法：

1.使用outline属性改变边框颜色：

.input:focus {
  outline: none;
  border: 1px solid #65a0fa;
}

2.使用border属性改变边框颜色：

.input:focus {
  border: 1px solid #65a0fa;
}

请注意，使用border属性时，需要将原来的border样式设置为none，否则无法生效。

css background 图片缩放

在CSS中，控制背景图片的缩放主要有几种方式：

1. **background- `contain`: 让背景图填充其容器，保持原始宽高比，图像可能被裁剪。
- `cover`: 让背景图完全覆盖容器，可能拉伸图片以适应容器大小，空白区域由内容填充色（如白色）填补。
- `auto`: 默认值，图片按照原始尺寸显示，不自动调整大小。
- 宽度和高度可以单独指定，例如 `background-size: width auto;` 或者 `width: 50%; height: auto;`.

2. **background- `no-repeat`: 图片不重复，通常用于单张背景。
- `repeat`: 图片沿着X轴和Y轴重复。
- `repeat-x` 或 `repeat-y`: 只沿一个方向重复。

3. **object-fit属性**:
对于响应式设计和自适应图片，这是一个更好的选择。它允许图片按比例缩放以适应容器，并提供多种方式适应，如 `fill`, `contain`, `cover`, `scale-down`, 等等。

4. **img元素**:
如果是在HTML里直接使用<img>标签，你可以设置`width`和`height`属性来影响图片的缩放。

例如：

.container {
  background-image: url('image.jpg');
  background-size: cover;
}

或者针对响应式屏幕:

@media screen and (max-width: 768px) {
  .container {
    background-size: contain;
  }
}