HTML网页图片使用技巧集锦

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

软件开发技术爱好者

7756人浏览 · 2022-08-08 22:30:00

软件开发技术爱好者 · 2022-08-08 22:30:00 发布

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>

效果如下：