HTML如何加背景图片_css设置背景图片

HTML如何加背景图片_css设置背景图片在HTML中,我们可以使用两种不同的方法在HTML网页上显示背景图片:使用背景属性(HTML标签)使用CSS内部样式表提示:HTML5不再支持标签的background属性,建议使用CSS在Html文档中添加背景图片。使用背景属性使用Background属性在Html文档中添加背景图片。按照以下步骤,我们可以轻松实现。步骤1:我们在文本编辑器中键入HTML代码,或者用文本编辑器打开现有的HTML文件。<!DOCTYPEhtml><html><hea

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

在HTML中,我们可以使用两种不同的方法在HTML网页上显示背景图片:

使用背景属性(HTML标签)

使用CSS内部样式表

提示:HTML 5不再支持标签的background属性,建议使用CSS在Html文档中添加背景图片。

使用背景属性

使用Background属性在Html文档中添加背景图片。按照以下步骤,我们可以轻松实现。

步骤1:我们在文本编辑器中键入HTML代码,或者用文本编辑器打开现有的HTML文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    
    <body>
        <h1>使用Background属性添加背景图片</h1>
    </body>

</html>

步骤2:将光标移动到HTML文档中的开始标签内,输入背景属性,如下所示:

<body background=" ">   

步骤3:输入要添加的图片的路径,如果图片存储在与HTML文件同一目录中,请输入以下路径:

<body background="image.jpg">

如果我们的图像存储在任何其他目录中,则输入该图像的正确路径。如下所示:

<body background="/home/images/image.jpg"> 

如果我们的图片在互联网上,那么我们也可以使用URL添加图片,如下所示:

<body background="https://www.runoon.com/img/background7.jpg">   

如果图像小于页面,图像会进行重复。

步骤4:最后,在文本编辑器中保存HTML文件或HTML代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    
    <body background="/img/background7.jpg"> 
        <h1>使用Background属性添加背景图片</h1>
    </body>

</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188529.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 启动hive出错,提示没有权限

    启动hive出错,提示没有权限

    2022年3月5日
    35
  • 影视短视频剪辑的完整操作流程(普通人也能学会)

    影视短视频剪辑的完整操作流程(普通人也能学会)嗨喽,大家好,我是会玩运营,能写代码,文案设计样样精通的江湖美男子菜鸟哥,一名走在营销路上的小菜鸟。点击上方蓝字“关注”,每天为你分享有用的营销运营干货。上一篇文章我们讲解了《全网最全抖音运营攻略》,相信看完这篇文章的朋友对于短视频运营多少有了一定的了解,文中的2020年抖音用户画像报告,我们了解到短视频用户对于影视类的作品关注度还是非常高的,今天我们就结合案例来为大家进行更加详细的讲解。本文将带你初步了解抖音、快手短视频中影视剪辑的完整操作流程,没有过多复杂的骚操作,零基础的普通人也能够看懂。

    2022年5月20日
    60
  • NFV指的是_以致和以至的区别

    NFV指的是_以致和以至的区别这几年由于网路虚拟化技术的快速发展,很多网元设备都从传统的特定硬件转到通用硬件上的软件形态,那NFV和VNF这两个概念是有什么区别呢?NFV指网路功能虚拟化技术,通过IT虚拟化,实现传统通信网络的功能;VNF就是虚拟出来的一个个网元,实现某个网络功能单元,NF;NFV发展分为初级和高级阶段;初级阶段是基于传统硬件的软件执行环境转换为基于通用硬件的VM的专用虚拟化环境…

    2022年9月6日
    1
  • Word域切换及更新快捷键域代码「建议收藏」

    Word域切换及更新快捷键域代码「建议收藏」Word域切换及更新快捷键“Alt+F9”切换所有域代码,选中域后“Shift+F9”切换选中的域代码。“Ctrl+A”后“F9”更新所有域代码,选中域后“F9”更新选中的域代码。更新域:单个域选中按F9,整个文档则“CTAL+A”后按F9。查看域:单个域选中按SHIFT+F9,整个文档则“ALT+F9”。

    2022年6月5日
    375
  • JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite)

    JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite)JAVA基础知识和常用算法合集:https://blog.csdn.net/GD_ONE/article/details/104061907目录1.主类的命名必须是Main2.输入输出:2.1输入:(1)使用Scanner类进行输入(2)hasNext()方法2.2输出3快速输入输出3.1使用StreamTokenizer和PrintW…

    2022年5月26日
    36
  • 以太坊硬件钱包原理_以太坊区块链怎么挣钱

    以太坊硬件钱包原理_以太坊区块链怎么挣钱这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

    2022年8月30日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号