html背景图片的使用以及解释

2023-12-18 16:44:54

简介：

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

一.背景图片属性：

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标签比较合适：

1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
4、使用img代替有背景图像可以显著提高性能的动画背景。
5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适：

1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
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>

效果：
在这里插入图片描述

文章来源:https://blog.csdn.net/tdx03/article/details/135064083
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。