html背景图片的使用以及解释_html背景图片代码怎么写-CSDN博客

本文链接：https://blog.csdn.net/tdx03/article/details/135064083

简介：

图像具有照亮任何网站或产品的神奇力量。除了装饰功能外，它们还可以在整个界面中传达信息并引导用户。

一.背景图片属性：


属性	作用
background-color：red	背景颜色
background-size:200px;	背景图片大小
backround-image:url	(‘图片路径’)
background-repeat：	repeat（背景可重复）、no-repeat（不可重复）、repeat-x（只沿水平方向平铺）、repeat-y（只沿水平方向平铺）、y-repeat(只沿垂直方向平铺)
background-position：	10px（表示x水平方向移动10px） 10px表示y垂直移动10px）–》（背景图像定位）
background:	顺序：背景颜色背景图片背景定位背景类型

二.背景图片的background-repeat、background-position、background-repeat的介绍：

background-repeat属性

background-repeat属性用来设置背景图片的重复方式，可以取以下值：


属性	作用
repeat：	默认值，背景图片将在水平和垂直方向上重复显示。
repeat-x：	只在水平方向重复显示。
repeat-y：	只在垂直方向重复显示。
no-repeat：	不进行重复显示。

body {
background-color:red;//背景图片颜色
background-image: url(bg.jpg);//背景图片路径
background-repeat: repeat-x;
}

2.background-position属性

background-position属性用来设置背景图片的起始位置，可以取以下值：


属性	作用
top：	背景图片从顶部开始显示。
bottom：	背景图片从底部开始显示。
center：	背景图片在中间显示。
left：	背景图片从左侧开始显示。
right：	背景图片从右侧开始显示。

body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}

3.background-size属性
background-size属性用来设置背景图片的大小。可以取以下值：


属性	作用
auto：	默认值，背景图片显示为原始大小。
cover：	将背景图片缩放以完全覆盖元素区域（可能会裁剪背景图片）。
contain：	尽可能缩小背景图片以完全适合元素区域（可能会有空间留白）。
指定大小：	可以使用像素、百分比等单位来指定背景图片的大小。

  body {
background-image: ur1(bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}

属性总结：
通过使用background属性，我们可以轻松地设置网页的背景图。通过background-image、background-repeat、background-position和background-size这四个属性，我们可以设置图片的路径、重复方式、起始位置和大小，请根据需要灵活使用。

三.HTML使用场景和css使用背场景：

如下场景使用img标签比较合适：	如下场景使用background-image属性比较合适：
1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。	1、如果图像不是内容的一部分时使用backgrond-image。
2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。	2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。	3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
4、使用img代替有背景图像可以显著提高性能的动画背景。	4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。

5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。	5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

四.示例代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
          width: 200px;
            height: 350px;
            background-color:pink;
            background-size: 200px;
            background-image: url("img/2.ing.jpg");
            background-position: initial;
            background-repeat: no-repeat;
            
        }

    </style>
</head>
<body>
<div>

</div>
</body>
</html>