首页利用HTML和css做一个文本框，里面可以插入图片和文字

利用HTML和css做一个文本框，里面可以插入图片和文字

时间: 2024-10-29 14:12:55 浏览: 22

Html_Js_cssWeb基础教程

Html_Js_cssWeb基础教程很细致可以供大家学习下

在HTML和CSS中创建一个允许用户插入图片和文字的文本框，通常会涉及到一个富文本编辑器或者称为WYSIWYG (What You See Is What You Get) 编辑器的设计。下面是一个简单的例子，展示了如何通过HTML `<input>` 和 CSS 创建一个基本的文本区域，同时提供上传图片的功能： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .contenteditable { border: 1px solid #ccc; padding: 10px; resize: both; /* 可调整大小 */ } input[type=file] { display: none; /* 隐藏原始的文件选择按钮 */ } </style> </head> <body> <div class="contenteditable" contenteditable="true"> <p>在这里输入文字和添加图片。</p> <img id="insertedImage" src="" alt="无图" style="display:none;"> <br> <label for="fileInput">点击选择图片:</label> <input type="file" id="fileInput" accept="image/*">  <script> document.getElementById('fileInput').addEventListener('change', function(e) { var file = e.target.files[0]; if(file) { var reader = new FileReader(); reader.onload = function(e) { var imgElement = document.getElementById('insertedImage'); imgElement.src = URL.createObjectURL(file); imgElement.style.display = 'inline'; }; reader.readAsDataURL(file); } }); </script> </div> </body> </html> ``` 在这个示例中，`.contenteditable` 类设置了文本框的样式，并允许用户直接编辑内容。`<input type="file">` 被隐藏，然后通过JavaScript事件监听器处理用户选择的图片。当用户选择图片后，读取文件并设置到`<img>`元素上。

阅读全文