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 "关于这方面的文件尚未写入;请考虑贡献!")
|