HTML 背景图像 |
您所在的位置:网站首页 › vegas怎么添加背景 › HTML 背景图像 |
❮ 上一节
下一节 ❯
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 办公设备维修网 版权所有 豫ICP备15022753号-3 |