文章编号：1608 / 更新时间：2024-12-30 14:44:40 / 浏览：次

该 background-image css 属性设置一个或多个图像的背景。这些图像覆盖整个元素的背景区域，包括填充、边框和边距。

语法

background-image: |linear-gradient(>)⟩)> [>]?;

参数

- 指定要显示的图像。 - 控制背景图像重复的方式。 - 指定图像放置在元素重复。 repeat-y - 背景图像仅在垂直方向上重复。 no-repeat - 背景图像不重复。

background-image: url(image.png) repeat;

位置

该 position 属性指定图像放置在元素中的位置。可能的值包括：

left top - 图像放置在元素的左上角。 left center - 图像放置在元素的左中。 left bottom - 图像放置在元素的左下角。 center top - 图像放置在元素的顶部居中。 center center - 图像放置在元素的中心。 center bottom - 图像放置在元素的底部居中。 right top - 图像放置在元素的右上角。 right center - 图像放置在元素的右中。 right bottom - 图像放置在元素的右下角。

background-image: url(image.png) center center;

尺寸

该 size 属性指定图像的大小。可能的值包括：

auto - 图像大小自动调整为适应元素。 contain - 图像缩小或放大以完全适合元素，同时保持纵横比。 cover - 图像放大以完全覆盖元素，纵横比可能被破坏。 > - 设置图像的实际宽度和高度。

background-image: url(image.png) cover;

附件

该 attachment 属性指定图像相对于元素如何滚动。可能的值包括：

scroll - 图像与元素一起滚动。 fixed - 图像固定在浏览器窗口中，不会与元素一起滚动。 local - 图像仅相对于包含元素滚动。

background-image:url(image.png) fixed;

起源

该 origin 属性指定图像的原点。可能的值包括：

border-box - 图像的原点位于元素的边框框的左上角。 pAdding-box - 图像的原点位于元素的填充框的左上角。 content-box - 图像的原点位于元素的内容框的左上角。

background-image: url(image.png) border-box;

浏览器支持

所有现代浏览器都支持 background-image 属性。

实例

以下示例使用 background-image 属性为段落元素设置背景图像：

这段文字具有一个背景图像。

以下示例使用 linear-gradient() 函数为段落元素设置渐变背景：

这段文字具有一个渐变背景。

相关标签： 属性、 css属性选择器、 CSS、 background、 image、

本文地址：https://www.qianwe.com/article/f91620d43f02cf1af8e3.html

上一篇：Java基础教程java基础入门第三版课后答案...
下一篇：formaction超链接怎么用...