如何设置网页背景图片?
htmlweb developmentfront end technology
精美的网页是吸引用户注意力的有效手段。在本文中,我们将了解如何将图片添加为网页背景图片。
方法
将图片设置为网页背景图片有两种方法,我们将在本文中学习。它们是:-
使用 background 属性
使用 CSS
方法 1:使用 background 属性
我们可以在 body 标签中使用 background 属性将图片设置为网页背景。我们需要指定要设置为 body 标签 background 属性的图片的 URL 或位置。
语法
网页主体示例
步骤 1 − 首先,我们将定义 HTML 代码。
How to add an image as background image of a web page?
步骤 2 − 现在我们将编辑 body 标签以使用本地文件 image.jpg 作为背景图像。
这是完整的代码 −
How to add an image as background image of a web page?
方法 2:使用 CSS
我们也可以使用 CSS 将任意图片设置为网页背景。为此,我们需要将所需图片的位置或 URL 指定给 background-image 属性。
语法
body {
background-image: url(" URL of the Image");
}
示例
步骤 1 − 首先,我们来定义 HTML 代码。
How to add an image as background image of a web page?
步骤 2 − 现在我们将添加 CSS。
body{
background-image: url("https://www.w3ccoo.com/images/logo.png");
}
这是完整的代码 −
body {
background-image: url("https://www.w3ccoo.com/images/logo.png");
}
How to add an image as background image of a web page?
总结
在本文中,我们了解了如何将图像设置为网页背景。我们研究了两种不同的方法来实现相同的效果。首先,我们了解了如何使用 background 属性来实现此任务。然后,我们还研究了如何使用 CSS 来实现相同的效果。
相关文章
如何查找 HTML select 标签中所有选中的选项?
HTML 中的容器标签和空标签
如何创建不跟随链接的 HTML 链接?
什么是 HTML 5 标准事件?
如何将 YouTube 视频添加到您的网站?
如何在 HTML5 中处理地理位置错误?
如何在 HTML 网页中添加音频播放器?
如何在 HTML 页面中添加视频?
HTML DOM Input Email required 属性
HTML DOM Input Datetime name 属性
打印
下一节 ❯❮ 上一节