HTML 图像格式化

参考资料

1. 如何添加按钮的过渡动画效果？
2. HTML 段落格式化标签
3. HTML 内联元素
4. HTML 水平线
5. Html/JS互转有哪些
6. HTML 内联 元素
7. HTML 来显示目录链接页面使用 iframe
8. html结构标签详细说明以及案例

HTML 图像格式化

基本图像标签：

常用属性：

• src：图像路径(必需)

• alt：替代文本(必需)

• width/height：宽高(像素或百分比)

• title：悬停提示文本

• loading：懒加载(lazy/eager)

CSS 图像扩展属性：

1. 尺寸控制：
   img {
    max-width: 100%;
    height: auto;
   }

2. 边框样式：
   img {
    border: 2px solid #ccc;
    border-radius: 8px;
   }

3. 阴影效果：
   img {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
   }

4. 响应式图像：

5. 滤镜效果：
   img {
    filter: grayscale(50%) blur(1px);
   }

6. 对象适配：
   img {
    object-fit: cover;
    object-position: center;
   }

7. 悬停效果：
   img:hover {
    opacity: 0.8;
    transform: scale(1.05);
   }

8. 背景图像：
   div {
    background-image: url("bg.jpg");
    background-size: cover;
    background-position: center;
   }

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。