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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。