css给img标签添加效果。。

可以使用 CSS 为 `<img>` 标签添加各种效果。以下是一些常见的效果及其实现方式：

1. 边框效果：

img {
  border: 1px solid black;
}

这会在 `<img>` 标签周围添加一个黑色的 1px 宽度的边框。

2. 圆角效果：

img {
  border-radius: 50%;
}

这会将 `<img>` 标签的边框变成一个圆形，大小为其宽度的一半。

3. 阴影效果：

img {
  box-shadow: 2px 2px 5px grey;
}

这会在 `<img>` 标签周围添加一个灰色的阴影，阴影的大小为 2px，模糊度为 5px。

4. 透明度效果：

img {
  opacity: 0.5;
}

这会将 `<img>` 标签的透明度设置为 0.5，使其变得半透明。

5. 悬浮效果：

img:hover {
  transform: scale(1.1);
}

这会在鼠标悬浮在 `<img>` 标签上时，将其放大 10%。

6. 滤镜效果：

img {
  filter: grayscale(100%);
}

这会将 `<img>` 标签转换为黑白图像，可以通过参数调整颜色的饱和度等属性。

通过以上方式，可以为 `<img>` 标签添加各种不同的效果。

相关问题

img标签属性css有那些

### 回答1：

`<img>` 标签是用于向 HTML 页面中添加图像的标签。以下是一些常用的 `<img>` 标签属性和相关的 CSS 属性：

1. `src` 属性：用于指定要在页面中显示的图像的 URL。

2. `alt` 属性：用于指定图像的替代文本，以便在图像无法加载时提供说明。

3. `title` 属性：用于指定当用户将鼠标悬停在图像上时显示的文本。

4. `width` 和 `height` 属性：用于指定图像的宽度和高度。这些属性还可以通过 CSS 设置。

5. `border` 属性：用于指定图像的边框宽度和样式。

6. `align` 属性：用于指定图像相对于周围文本的对齐方式。

7. `style` 属性：用于应用 CSS 样式到图像。可以使用样式属性来设置图像的宽度、高度、边框、外边距、内边距等属性。

例如，可以使用以下 CSS 样式为 `<img>` 标签添加外边距和边框：

img {
  margin: 10px;
  border: 1px solid black;
}

### 回答2：
img标签属性有以下几个常用的css属性：

1. width：设置图片的宽度。可以使用具体数值（如px、em等）或者百分比。

2. height：设置图片的高度。同样可以使用具体数值或者百分比。

3. margin：设置图片与周围元素之间的间距。可以使用上、右、下、左四个方向分别设置具体数值，也可以统一设置。

4. padding：设置图片与其边框之间的距离。同样可以在四个方向上分别设置数值，或者统一设置。

5. display：用于控制图片的显示方式。常见的取值有"block"（作为块级元素显示），"inline"（作为内联元素显示）和"none"（不显示）。

6. float：设置图片的浮动方式。常见的取值有"left"（向左浮动）和"right"（向右浮动）。

7. border：设置图片的边框样式。可以设置边框宽度、颜色和样式。

8. background：设置图片的背景颜色或者背景图片。

9. position：设置图片的定位方式。常见的取值有"static"（默认定位）、"relative"（相对定位）、"absolute"（绝对定位）和"fixed"（固定定位）。

10. opacity：设置图片的透明度。取值范围为0（完全透明）到1（完全不透明）之间。

以上是img标签常用的css属性，通过这些属性可以对图片进行各种样式的设置和调整。

css用参照物定位住img标签

可以使用相对定位或绝对定位来定位img标签，需要指定参照物的位置。

相对定位：

.parent {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在父元素中添加相对定位，然后使用绝对定位将img标签定位到父元素的中心位置。

绝对定位：

.parent {
  position: relative;
}
img {
  position: absolute;
  top: 0;
  left: 0;
}

在父元素中添加相对定位，然后使用绝对定位将img标签定位到父元素的左上角位置，可以通过top和left属性来调整位置。