HTML如何设置背景图片?有几种设置背景图片的办法?

我们在编辑网页时,如果觉得网页过于单调,这时便可以加上一张自己喜欢的背景图。这篇文章中,W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片,分别有哪几种设置背景图片的方法。

方法一、HTML中设置背景图片

HTML中的<body></body>标签内可直接设置背景图片。具体代码如下:

<body background="图片路径">

效果展示:

backgroundimage

直接用<body></body>设置背景图片的话,浏览器会根据你图片的大小,铺满整个屏幕。若不想平铺图片,还需要进行另外的 CSS 设置。此方法较为麻烦。

方法二:CSS 设置背景图片

CSS 设置背景图片的方式与 HTML 设置背景图片的方式大体一致,具体代码如下:

<style type="text/css">
    body{
	    background: url("图片地址");             
	}
</style>

到目前为止,图片还是会重复铺满整个屏幕。

我们需要在进行添加 CSS 样式进行优化。

<style type="text/css">
	body{
		background: url("图片地址") no-repeat center center fixed;
                /*兼容浏览器版本*/
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
	}
	</style>

最终效果如下:

bgimg

相关推荐

  1. CSS-设置背景图片大小

    2024-01-17 22:14:02       53 阅读
  2. unity专题(1)背景图片设置

    2024-01-17 22:14:02       42 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-17 22:14:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-17 22:14:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-17 22:14:02       82 阅读
  4. Python语言-面向对象

    2024-01-17 22:14:02       91 阅读

热门阅读

  1. LeetCode 37. 解数独

    2024-01-17 22:14:02       57 阅读
  2. 基于stm32的智能衣柜系统设计(毕业设计)

    2024-01-17 22:14:02       53 阅读
  3. GoLang刷题之leetcode

    2024-01-17 22:14:02       50 阅读
  4. 用Python做数据分析之生成数据表

    2024-01-17 22:14:02       48 阅读
  5. openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c

    2024-01-17 22:14:02       48 阅读
  6. ssl解码

    2024-01-17 22:14:02       54 阅读
  7. Git远程仓库

    2024-01-17 22:14:02       55 阅读
  8. c语言基础知识

    2024-01-17 22:14:02       56 阅读
  9. python

    2024-01-17 22:14:02       57 阅读
  10. 深入探讨 Go 语言中的 Map 类型

    2024-01-17 22:14:02       52 阅读
  11. zabbix

    zabbix

    2024-01-17 22:14:02      38 阅读
  12. 微信小程序 - 模板与配置 介绍

    2024-01-17 22:14:02       59 阅读