html图片旁边加文字

利用在文字旁边创建盒子然后调整盒子的位置找到文字在图片边

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝</title><link rel="stylesheet" href="tb.css">
</head>
<body><div class="box"><img src="tp.webp" alt="1"><div class="box2"><span class="text"><span>象有秘密</span> <span>中式</span><span>陶瓷研磨碗厨房捣蒜器手动研磨器家用蒜泥碾磨芝麻</span></span></div><div class="box3"><span class="text2">送运费险</span></div><div class="box4"><span class="text3">¥22.5</span></div></div>
</body>

css代码如下

主要方法就是大盒子包小盒子

很简单的方法

其他的方法也有但是这是其中的一个

.box{width: 400px;height: 200px;background-color: rgb(255, 255, 255);border: 2px solid rgb(255, 77, 0);box-sizing:border-box;  border-radius: 20px; }.box2{width: 200px;height: 70px;background-color: rgb(255, 255, 255);margin-right: 80px;margin-left: 190px;margin-top: -180px;}.box3{width: 80px;height: 30px;background-color: rgb(255, 255, 255);border: 2px solid rgb(255, 77, 0);box-sizing:border-box;  border-radius: 10px; margin-right: 50px;margin-left: 200px;margin-top: 0px;}.box4{width: 80px;height: 30px;background-color: rgb(255, 255, 255);margin-right: 50px;margin-left: 200px;margin-top: 20px;}img{width: 170px;height: 170px;border-radius: 20px; box-shadow:2px 2px 15px;margin-right: 15px;margin-left: 15px;margin-top: 15px;}.text{width: 200px;height: 100px;vertical-align: middle;}.text2{color: rgba(255, 60, 0, 0.836);text-align: center;}.text3{font-size: 30px;color: red;text-align: center;}

html图片旁边加文字相关推荐

python怎么加图片_怎么在图片旁边加文字 python如何在图片上添加文字 - 励志 - 52资讯网...
Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...
PHP 合成图片并在图片上加文字
/*** Info: PHP把一张图片作为背景和另一张图片合成新图片*/public function createImage(){$path_1 = 'XXXXX/attachment/images ...
uniapp——图片下加文字，卡片，阴影，图标--文字--箭头（个人中心）
1.图片下加文字效果图: template代码 <view class="view-box"><image class="icon" src ...
不用PS，如何给多图片批量加文字水印？
给图片加上文字水印是我们在工作中经常遇到的事情,比如将图片上传到网站上,为了防止别人盗用自己的图片,我们都习惯在图片上加上水印,文字水印或者图片水印,我就经常在工作中需要给图片加水印. 一个图片加上文 ...
php 图片上加文字,php使用GD库实现图片上添加文字的方法（代码）
本篇文章给大家带来的内容是关于php使用GD库实现图片上添加文字的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们可以利用php的gd库扩展来对我们的图片进行处理,例 ...
html怎么在图片上加文字_怎么把图片文字转换成word文档
我们在和别人交流的时候,有时候为了方便对方查看和理解,我们会使用文字图片进行交流,这是一种非常方便交流的形式.那如果我们想要将图片里的文字转换成Word文档应该怎么操作? 如果我们想要将图片识别为Wo ...
java生成带文字的图片_Java在背景图片上面加文字或者文字自动生成图片
正巧遇到一个项目需要图片合成,查阅了网上许多资料之后整理了一份生成图片的工具类,代码如下:package org.yygzs.acker.util; import java.io.IOExceptio ...
Python 给图片上加文字
import PIL from PIL import ImageFont import PIL from PIL import ImageFont from PIL import Image from ...
php怎么在图像中显示文字,怎么在图片上面加文字人物图片中加文字或特效
这是一个拍照和自拍的年代,照片处理也就成为后期常做的事了.很多人都会先把照片处理得美美的,再传网上晒照.你知道如何在人物图片上添加闪烁的文字做成GIF动态图片么?常有在人物图片加动态说明文字或特效以渲 ...
VUE 图片上加文字水印
我这里用的是uniapp上传方法上传的方法 uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是 ...

html图片旁边加文字

html图片旁边加文字相关推荐

最新文章

热门文章