HTML网页图片使用技巧集锦

本文介绍HTML网页图片设置技巧，将用到CSS（Cascading Style Sheets 层叠样式表）因此需要了解CSS，不熟悉的读者可先阅读“可见 CSS快速入门”https://blog.csdn.net/cnds123/article/details/112976663

本文包括：HTML网页怎么在图片上面在加另一张图片，HTML网页图片等比例缩放，HTML网页中的图片添加边框效果，HTML网页的图片上添加文字，HTML网页背景图片填充整个屏幕不变形。

HTML网页怎么在图片上面在加另一张图片

把一张图片作为背景，另一张图片放在背景上——实现在图片上再加上一个图片。

法一、在css标签内，对两张图片进行样式设置，设置底部的图片高度、宽度、位置属性为相对定位（position:relative）；设置叠加在上面的图片的高度、宽度、位置属性为绝对定位（position:absolute），同时使用left和top设置图片位置，最后，使用z-index设置其在图片的最上面，用 z-index 设置显示层级，小图的层级一定要比大图高。

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css小图放在大图上</title>
</head>
<body>
<style>.img1{height:400px; width:582px; position:relative}.img2{height:150px; width:175px; position:absolute;top:50px;left:100px;z-index:2;}
</style>
<img src="大.jpg"  class ="img1" />
<img src="小.jpg"  class ="img2" />
</body>
</html>

图片素材

运行效果如下：

法二、

在css标签内，定义div的宽度为400px，高度为300px，再使用background属性设置div的背景图片，no-repeat用于设置背景图片不重复显示。

再使用div标签创建一个模块，在div标签内，使用img标签创建一张图片。

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css小图放在大图上2</title>
</head>
<body>
<style>.mydiv{width:582px;height:400px;background-image:url("大.jpg");background-repeat: no-repeat;}
</style>
<div class="mydiv"><img src="小.jpg" width="175" height="150px"/>
</div>
</body>
</html>

运行效果如下：

HTML网页图片等比例缩放

法一、<img>标签的width属性和height属性设置图片的宽度和高度，单位默认是像素，但是在图片标签上，这两个属性值不需要写单位(在css中是需要写的)。特别提示，如果省略其中一个属性，则表示按原比例缩放图片。

源码如下：

源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放实验</title>
</head>
<body>
<p>图片等比例缩放显示实验</p>
<img src="汽车.png"  height="100" />
</body>
</html>

图片素材

运行效果如下：

法二、利用css，在css中，想要实现img元素的等比例缩小，需要利用到transform属性配合scale()函数实现。

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放实验2</title><style>.imgA{position:absolute;  /* 绝对位移：图片放置位置 */left:-180px;  /* left 属性规定元素的左边缘 */top:-80px;   /* top 属性规定元素的顶部边缘 */transform:scale(40%);}</style>
</head>
<body>
<p>图片等比例缩放显示实验2</p>
<img class="imgA" src="汽车.png" />
</body>
</html>

运行效果如下：

HTML网页中的图片添加边框效果

CSS的 border 属性用于指定元素边框的样式、宽度和颜色。

利用css的边框（border）属性，设置

border-style是样式，样式有solid 实心的、dashed虚线等样式。

粗细使用border-width来设置。

颜色使用border-color来设置。

如

border-style:solid;

border-width:5px;

border-color:red;

可简写，如

border:dashed 5px red;

网页添加图片有两种方法：

直接在img图片标签

图片外有“盒子”，即img图片标签外有div。

据此给出两种示例

图片素材

示例1、源码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给图片加边框示例A</title>
</head>
<body>
<style>.img1{border:solid 5px red;}
</style>
<img src="菊花.png"  class ="img1" />
</body>
</html>

运行效果如下：

示例2、源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给图片加边框示例B</title>
</head>
<body>
<style>.mydiv1 img{border:solid 5px red;}
</style>
<div  class ="mydiv1"><img src="菊花.png" />
</div>
</body>
</html>

运行效果如下：

HTML网页的图片上添加文字

换句话说，html中怎么让文字在图片上面

先给出图片素材

方法较多，下面给出几种示例。

法一、源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在图片上添加文字之一</title><style>div{position: relative;}p{font-size: 22px;color: red;position:absolute;top:250px;left:100px;}</style>
</head>
<body><div><img src="./竹.png"><p>这是图片上的文字</p></div>
</body>
</html>

效果如下：

法二、源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在图片上添加文字之二</title><style>div{width: 570px;height: 399px;position: relative;     background-image:url("./竹.png");background-repeat:no-repeat; }div p{position:absolute;font-size: 22px;color: red;top:250px;left:100px;}</style>
</head>
<body><div><p>这是图片上的文字</p></div>
</body>
</html>

效果如下：

HTML网页背景图片填充整个屏幕不变形

可参见 HTML中背景图片如何自适应屏幕_软件开发技术爱好者的博客-CSDN博客_html图片自适应屏幕大小