HTML网页图片使用技巧集锦

已于 2024-09-12 10:06:02 修改
阅读量8.6k 收藏 62
点赞数 6
分类专栏： HTML5与CSS3 文章标签： html css
于 2022-08-08 22:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123/article/details/126232479
版权
本文介绍了HTML结合CSS处理网页图片的各种技巧，包括如何在图片上叠加另一张图片、图片等比例缩放、添加边框效果以及在图片上添加文字。提供了详细的代码示例和运行效果展示，帮助读者掌握这些实用的网页设计技能。
摘要由CSDN通过智能技术生成

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>

效果如下：

HTML5网页多张图片形布局

HTML5网页多张图片形布局，如指定每行显示3张，共2行，单击图片显示放大图。

效果图

提示，图片在鼠标悬停时有一个轻微的放大效果，提供更好的交互体验。当用户点击任何一张图片时，该图片将会在一个模态框中放大显示，图片会保持其原始宽高比，同时确保不超出屏幕。用户可以通过点击模态框的关闭按钮（×）或点击图片外的任何区域来关闭模态框。

注意准备6张实际的图片image1.jpg，image2.jpg……image6.jpg，和源码放到同一个目录中。

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3x2 图片网格布局 - 带居中显示的点击显示原图</title>
    <style>
        .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .image-item {
            width: 100%;
            aspect-ratio: 16 / 12;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .image-item:hover {
            transform: scale(1.05);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            display: block;
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="image-grid">
        <img src="image1.jpg" alt="图片1" class="image-item">
        <img src="image2.jpg" alt="图片2" class="image-item">
        <img src="image3.jpg" alt="图片3" class="image-item">
        <img src="image4.jpg" alt="图片4" class="image-item">
        <img src="image5.jpg" alt="图片5" class="image-item">
        <img src="image6.jpg" alt="图片6" class="image-item">
    </div>

    <div id="imageModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>

    <script>
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImage');
        const closeBtn = document.getElementsByClassName('close')[0];
        const images = document.getElementsByClassName('image-item');

        for (let img of images) {
            img.onclick = function() {
                modal.style.display = "flex";
                modalImg.src = this.src;
            }
        }

        closeBtn.onclick = function() {
            modal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

说明：

CSS样式：

☆    .image-grid 使用 CSS Grid 布局：

    display: grid; 启用网格布局。

    grid-template-columns: repeat(3, 1fr); 创建3列，每列宽度相等。

    gap: 20px; 设置网格项之间的间隔。

☆    .image-item 样式确保所有图片大小一致且美观：

    width: 100%; 使图片填满网格单元。

    aspect-ratio: 16 / 9; 宽高比。

    object-fit: cover; 确保图片填满区域，可能会裁剪但不会变形。

☆    创建了 .modal、.modal-content 和 .close 类来样式化模态框。

有一个模态框 <div>，包含一个关闭按钮和一个用于显示放大图片的 <img> 元素。

为每个图片添加了点击事件监听器。

实现了打开模态框并显示被点击图片的功能。

添加了关闭模态框的功能（通过关闭按钮或点击模态框外部）。

当用户点击任何一张图片时，该图片将会在一个模态框中放大显示，图片会保持其原始宽高比，同时确保不超出屏幕。

用户可以通过点击模态框的关闭按钮（×）或点击图片外的任何区域来关闭模态框。

图片在鼠标悬停时有一个轻微的放大效果，提供更好的交互体验。

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

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

学习&实践爱好者
关注
专栏目录
常用HTML图片处理
wxj_ios的博客
03-14 1562
简单的HTML图片处理
网页图片优化工具及使用技巧分享
09-22
网页图片优化的知识点主要包括图片优化工具的使用和相关的技术技巧。首先，我们来了解几种常用的网页图片优化工具： 1. TinyPNG：这是一个使用智能有损压缩技术来减小PNG文件大小的工具。所谓智能有损压缩，指的是...
HTML里面使用图片！！！
北溟南风起
02-29 340
目录 标签 SRC属性 ALT属性 宽度width、高度height属性 <img>标签 SRC属性 在html中，我们用<img>标签定义图像。 <img>是空标签，只包含属性，没有闭合标签。 在页面上显示一个图像，我们用 src （源属性）。源属性的值是图像的URL地址。 语法格式： <img src="url"> &l...
在HTML中添加图片
最新发布
Q18600000000的博客
09-15 1038
标签中指定要显示的图像
html_img图片标签的使用.html
Jiashilin
03-28 641
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="data/happy.png" alt="tupian"&gt...
HTML图片
qq_62755767的博客
05-09 3294
当需要在网页中插入图片时，需要用到图片标签<img>，图片标签是一个单标签，他其中有一个源属性(src="插入图片的链接")，源属性的值是图像的 URL 地址。 <img src="url" /> 浏览器将图像显示在HTML文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。 <p>这是汤姆猫</p> <img src="image/cat.jpg" h.
在 HTML 文件中添加图片的完整指南
T19900的博客
08-13 9083
通过本文的介绍，你应该掌握了在 HTML 中添加和调整图片的基础知识。这些技巧不仅能帮助你优化网页的视觉效果，还能提高网页的可访问性和响应式表现。无论是简单的图片展示，还是复杂的样式调整，正确使用<img>标签都能让你的网页更加生动和吸引人。
3D图片视差网页_html图片3d移动_3D图片视差网页_
10-04
本文将详细探讨如何使用HTML5实现3D图片视差移动特效，以及其在网页设计中的应用。 首先，我们要理解HTML5在其中的角色。HTML5是现代网页开发的标准，提供了许多新的API和元素，如Canvas、SVG、WebGL等，它们为创建...
html2canvas使用JavaScript将整个网页或一部分区域截取成图片并导出
08-08
通过了解其原理和使用技巧，我们可以解决各种场景下的需求，如网页保存、分享和导出。然而，由于HTML和Canvas之间的差异，使用时可能会遇到挑战，但借助社区提供的资源和解决方案，我们可以克服这些问题，实现高质量...
CSS+JS滑动门式的图片轮番切换.rar_HTML图片轮番切换_网页 图片轮播
09-23
在实际应用中，"网页图片轮播模板"可能包含额外的功能，如导航箭头、分页指示器或自动播放控制。这些可以通过添加额外的HTML元素和编写对应的JavaScript逻辑来实现。导航箭头可以让用户手动切换图片，分页指示器则...
网页设计中HTML代码、CSS代码和javascript的技巧和细节
09-25
尽管在上述内容中没有直接提到CSS技巧，但可以从HTML对齐示例中看出，通过适当使用内联样式（style属性）或者在外部样式表中定义样式规则，可以使网页元素按照设计意图正确地显示。 3. JavaScript技巧 JavaScript是...
HTML5专业级图像处理引擎
08-22
腾讯专业的HTML5专业级图像处理引擎 最好且最小的移动裁剪组件
html图片处理
taylorswift的博客
01-05 464
html图片处理 标签 说明 img 图片标签 src 路径，相对路径或绝对路径，必选 alt 描述文字（给搜索引擎看），当图片无法显示，则显示alt的文字，必选 title 描述图片，鼠标移动到图片上时，会显示title的文字，可有可无 路径问题 我们绝大多数时候用相对路径。 html文件和图片文件同级时，直接src写图片的名字 …/表示上级目录 例： <!DOCTYPE html> <html> <head> <meta c
html的图片处理
clarkt的专栏
01-20 530
这篇文章主要用于存储在网上看到的关于图片处理的一些奇技淫巧 1、纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item 元素的 CSS 定义如下： .item { float: left; margin: 10px
html5图像、图片处理【转】
weixin_34246551的博客
01-19 392
本文主题       情人节在网上看到国外JS牛人利用HTML5技术实现的一朵玫瑰花，深切的感受到HTML5技术的强大。本着学习的态度看了一下那朵玫瑰花的源代码，其中用到的HTML5技术是canvas标签，于是灵光一现，想试一下能不能进行图像处理，结果成功了，再次介绍一下经验。       本文的思路是获取一张带有验证码的图片，然后对其进行灰度化操作，完成后对其使用Otsu算法进行二值化操作，...
第十节、图片处理：html中的图片处理
DreamFive
11-03 424
这节的内容，是针对html中引入图片的处理。 html-withimg-loader 安装： npm  install  html-withimg-loader --save-dev 配置loader： { test:/\.(html|html)$/i, use:['html-withimg-loader'] } 然后在终端中可以进行
html图像、绝对路径和相对路径
mc123c的博客
02-23 3029
html图像&lt;img&gt;标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。&lt;img src="images/pic.jpg" alt="产品图片" /&gt; 绝对路径和相对路径像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，...
HTML网页图片背景以及图片自适应设置
热门推荐
m0_56146871的博客
04-14 1万+
关于HTML网页图片背景以及图片自适应设置 Test 1 背景图片需要用到标签中的background属性 图片背景需要显示的位置是网页的身体部分即在body中显示，因此background属性应该放在body标签内 本次使用图片的大小为4808*2704像素，这是图片原来的样子 这是代码部分 <body background="img\maple leaf.jpg"> <!--未设置图片大小--> </body> 这是仅设置了背景图片的效果，因为图片
如何在html中插入图片
Yt0601的博客
06-21 8306
学习html中必学的一个知识点，如何插入图片。 在学习了如何插入图片后，页面会变的丰富很多，在枯燥的文字中添加了一抹亮色
网页制作实用技巧集锦
"这篇文档包含了多个实用的网页制作技巧，主要针对有经验的网页开发者或设计者。内容包括阻止右键菜单、禁止选择文本、防止图片复制、设置网页图标、创建书签、禁用输入框的IME模式、检查是否在框架内、确保页面在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习&实践爱好者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值