HTML 背景图像 您所在的位置:网站首页 crissielee图片 HTML 背景图像

HTML 背景图像

#HTML 背景图像| 来源: 网络整理| 查看: 265

❮ 上一节 下一节 ❯ HTML 背景图像

可以为几乎任何 HTML 元素指定背景图像。

HTML 元素上的背景图像

要在 HTML 元素上添加背景图像,请使用 HTML style 属性和 CSS background-image 属性:

实例

在 HTML 元素上添加背景图像:

亲自试一试 »

也可以在 部分的 元素中指定背景图像:

实例

在 元素中指定背景图像:

div {  background-image: url('img_girl.jpg'); } 亲自试一试 » 页面上的背景图像

如果希望整个页面具有背景图像,则必须在 元素上指定背景图像:

实例

为整个页面添加背景图像:

body {  background-image: url('img_girl.jpg'); } 亲自试一试 » 背景重复

如果背景图像小于元素,则图像将在水平和垂直方向上重复自身,直到到达元素的末端:

实例 body {  background-image: url('example_img_girl.jpg');} 亲自试一试 »

要避免背景图像自身重复,请将 background-repeat 属性设置为 no-repeat。

实例 body {  background-image: url('example_img_girl.jpg');  background-repeat: no-repeat;} 亲自试一试 » 背景封面

如果希望背景图像覆盖整个元素,可以将 background-size 属性设置为 cover。

另外,要确保始终覆盖整个元素,请将 background-attachment 属性设置为fixed::

这样,背景图像将覆盖整个元素,没有拉伸(图像将保持其原始比例):

实例 body {  background-image: url('img_girl.jpg');  background-repeat: no-repeat;  background-attachment: fixed;   background-size: cover; } 亲自试一试 » 背景拉伸

如果要拉伸背景图像以适合整个元素,可以将 background-size 属性设置为100% 100%:

尝试调整浏览器窗口的大小,您将看到图像将拉伸,但始终覆盖整个元素。

实例 body {  background-image: url('img_girl.jpg');  background-repeat: no-repeat;  background-attachment: fixed;   background-size: 100% 100%; } 亲自试一试 » 了解更多 CSS

从上面的例子中,您了解到,可以使用 CSS 背景属性来设置背景图像的样式。

了解有关CSS背景属性的更多信息: CSS Background 教程。

❮ 上一节 下一节 ❯


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有