30 lines
2.1 KiB
Markdown
30 lines
2.1 KiB
Markdown
|
---
|
|||
|
|
title: CSS Images
|
|||
|
|
localeTitle: CSS图像
|
|||
|
|
---
|
|||
|
|
## CSS图像
|
|||
|
|
|
|||
|
|
这有助于向网站添加图像。
|
|||
|
|
|
|||
|
|
#### 代码示例
|
|||
|
|
|
|||
|
|
`<img src="picture.jpg" alt="Picture" width="100" height="100">`
|
|||
|
|
|
|||
|
|
* **src：**它包含所需图像的路径值
|
|||
|
|
* **alt：**如果未显示图像，则可以使用alt属性显示备用文本。
|
|||
|
|
* **width：**指定图像的宽度（可以是百分比或px或auto）
|
|||
|
|
* **height：**指定图像的高度（可以是百分比或px或auto）
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
##### 属性
|
|||
|
|
|
|||
|
|
[`image-orientation`](/en-US/docs/Web/CSS/image-orientation "图像方向CSS属性描述了如何更正图像的默认方向。") [`image-rendering`](/en-US/docs/Web/CSS/image-rendering "图像呈现CSS属性向浏览器提供有关其应用于缩放图像的算法的提示。") [`object-fit`](/en-US/docs/Web/CSS/object-fit "object-fit CSS属性指定如何调整替换元素（如<img>或<video>）的大小以适合其容器。") [`object-position`](/en-US/docs/Web/CSS/object-position "对象位置CSS属性确定所选元素在其框内的对齐方式。")
|
|||
|
|
|
|||
|
|
##### 功能
|
|||
|
|
|
|||
|
|
[`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient "关于这方面的文件尚未写入;请考虑贡献！") [`radial-gradient()`](/en-US/docs/Web/CSS/radial-gradient "关于这方面的文件尚未写入;请考虑贡献！") [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/repeating-linear-gradient "关于这方面的文件尚未写入;请考虑贡献！") [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/repeating-radial-gradient "关于这方面的文件尚未写入;请考虑贡献！") [`element()`](/en-US/docs/Web/CSS/element "关于这方面的文件尚未写入;请考虑贡献！")
|
|||
|
|
|
|||
|
|
##### 数据类型
|
|||
|
|
|
|||
|
|
[`<image>`](/en-US/docs/Web/CSS/image "<image> CSS数据类型表示2D图像。有两种图像：普通图像（通常使用URL引用）和动态生成的图像（如使用<gradient>或element（）生成的图像）。图像可以与许多CSS属性一起使用，例如背景图像，边框图像，内容，列表样式图像和光标。") [`<uri>`](/en-US/docs/Web/CSS/uri "关于这方面的文件尚未写入;请考虑贡献！")
|