HTML如何在圖片上新增內容（如文字，選單欄，按鈕等）
HTML如何在圖片上新增內容
最近做的一個效果是網頁頭部有一張大圖，選單欄漂浮在圖片之上。我看到網上講的很簡單，大致原理就是圖片定為相對定位，文字定為絕對定位即可。不過我實現的並不順利，花了幾個小時才讓選單欄漂浮在圖片上。以下是效果圖。
首先布好局：
請注意到此時選單欄和文字並沒有在圖片之上，我給選單欄設定的背景色是半透明的黑色，它若成功漂浮在圖片之上，會是半透明的。
現在為圖片和文字的盒子.imgw新增位置屬性：position:relative;（相對定位）
為文字的盒子.words新增：position:absolute;(絕對定位)
也為選單欄nav新增：position:absolute;(絕對定位)
這三個定位很重要！！
此時效果如下：
定位完了以後可以看到選單欄不見了，文字也沒有漂浮在圖片上。不要著急，選單欄只是被蓋住了，現在給選單欄設定z-index:10，
文字為它設定距離top:50%,距離left:30%。
這裡是完整程式碼：
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> </head> <style type="text/css"> nav{ width: 100%; height: 60px; background: rgba(0,0,0,.3); position: absolute; z-index: 10; } nav ul{ list-style: none; margin: 0; padding: 0; } nav ul li{ text-align: center; float: left; line-height: 60px; } nav ul li a{ width: 100px; color: #fff; font-size: 20px; font-weight: 600; display: block; } nav ul li a:hover,nav ul li a:visited{ text-decoration: none; background: rgba(0,0,0,.5); color: #fff; } .words{font-size: 40px; letter-spacing: 10px; position: absolute; top:50%; left: 30%;} .imgw{position: relative;} </style> <body> <nav> <ul> <li class="active"><a href="#">首頁</a></li> <li><a href="#">服務</a></li> <li><a href="#">支援</a></li> <li><a href="#">部落格</a></li> <li><a href="#">下載</a></li> </ul> </nav> <div class="imgw"> <img src="images/header1.png" alt= "" width="100%"> <div class="words">飛流太萌了</div> </div> </body> </html>
相關推薦
HTML如何在圖片上新增內容（如文字，選單欄，按鈕等）
HTML如何在圖片上新增內容 演示效果 最近做的一個效果是網頁頭部有一張大圖，選單欄漂浮在圖片之上。我看到網上講的很簡單，大致原理就是圖片定為相對定位，文字定為絕對定位即可。不過我實現的並不順
office（如：Word、Excel、PPT 等）檔案輕鬆實現線上預覽
解決方案有很多，比如可以先將檔案轉圖片或者pdf然後再網頁中顯示， 我在這裡說的可能並不適合大家，這裡簡單說下幾個快捷的方式 方案一： 可以直接使用第三方服務，不過這個需要收費的，我在這列幾個 http://www.yozodcs.com/ htt
js案例：使用js彈出小視窗（沒有瀏覽器視窗位址列，工具欄，選單欄，顯示欄，只有關閉和最小化按鈕）
使用js彈出小視窗（沒有瀏覽器視窗位址列，工具欄，選單欄，顯示欄，只有關閉和最小化按鈕） 程式碼如下： <input type="text" name="ok" value="彈出小視窗" onclick="addFiles()"> functionad
圖片上傳功能（FastDFS圖片伺服器 kindEditor富文字編輯器）
第一步 ： 新增jar包 Commons-io、fileupload，兩個jar包 第二步：在springmvc.xml中配置多媒體解析器 &
利用python pil 實現給圖片上新增文字
最近的一個工程專案是講文字新增到影象上。 使用了opencv，結果發現利用opencv給影象新增文字有侷限。 （1）可利用的字型型別比較少，需要安裝Freetype擴充套件，比較複雜。 （2）不能用putText函式輸出中文，否則就會出現亂碼的情況 只好選擇使用pytho
Android繪圖例項(Bitmmap,Canvas,Pain的使用)&動態的在圖片上新增文字(canvas.drawText)
近些天學習影象處理，今天看見了一段程式碼中有Bitmap時，找了些Bitmap的資料，有查看了與之有關的繪圖類。 BitMap代表一張點陣圖，BitmapDrawable裡封裝的圖片就是一個Bitmap物件，開發者被一個Bitmap物件包裝成BitmapDrawable物
iOS開發 在圖片上新增文字，圖片合成文字，圖片上新增富文字，美圖秀秀，美顏相機文字編輯
+ (UIImage *)imageWithText:(NSString *)text textFont:(NSInteger)fontSize textColor:(UIColor *)textColor
html圖片上傳閱覽並且點擊放大
toc 開機自啟 spec lai icon 知識 公司簡介 tag sed 關閉 qq_31540195的博客
php圖片上傳類（支持縮放、裁剪、圖片縮略功能）
php圖片上傳類（支持縮放、裁剪、圖片縮代碼： /** * @author [Lee] <[<[email protected]>]> * 1、自動驗證文件是表單提交的文件還是base64流提交的文件 * 2、驗證圖片類型是否合法 * 3、驗證圖片尺寸是否合法 * 4、驗證圖片大小是否合法
ssm整合-圖片上傳功能（轉）
需要 PE 添加用戶 名稱 simple target url 完整 dsi 本文介紹 ssm （Spring+SpringMVC+Mybatis）實現上傳功能。 以一個添加用戶的案例介紹（主要是將上傳文件）。 一、需求介紹 我們要實現添加用戶的時候上傳圖片（其實任何文件都
UEditor 圖片上傳配置（PHP）
修改config.php檔案第11,12行 線上 "imageUrlPrefix": "http://www.leition.com/", /* 圖片訪問路徑字首 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/
如何快速的將圖片裏的內容轉換成文字
按鈕 點擊 文字識別軟件 .com ron 等待 process 將在 方便 有時候我們在電腦中瀏覽到了一些帶有文字的圖片，覺得上面的文字寫的很好想要將其保存下來，這時候為了偷懶不去打字的話就需要使用到圖片轉文字的方法了，具體怎樣去操作呢？下面小編將在圖片文字識別軟件中為大
用 Python 和 OpenCV 檢測圖片上的條形碼（轉載）
原文地址：http://python.jobbole.com/80448/ 假設我們要檢測下圖中的條形碼： 圖1：包含條形碼的示例圖片 現在讓我們開始寫點程式碼，新建一個檔案，命名為detect_barcode.py，開啟並編碼： Python 1&nbs
記錄一次使用form表單完成圖片上傳功能（相容ie9）
1.前臺頁面 <div class="dform_con" style="position: relative;" id="uploadform"> <iframe id="file_upload_return" style="d
jquery提取頁面公共內容（如header，footer等）引入其他頁面【$('為引入內容建立的div的id名').load('引入的頁面l')】
在做專案時，通常頁面header部分是相同的，但如果複製貼上，程式碼量很大而且很冗餘，因此可以像vue一樣可以將頁面拆分成不同的元件，而header就是一個元件，可以單獨提取出來，最後再把不同元件合併呈現不同的頁面； 具體怎麼把頁面的一部分提取出來然後引入到需要的頁面，只需
【移動端實現】相機喚起及圖片上傳功能（包括微信）
前言 目前有個需求是圖片拍照上傳的功能，但是我就是死活掉不起相機。。。總是開啟的是檔案目錄OR上傳圖片。。。。而不是相機。。。 所以對比了下 程式碼： 參考了百度移動端實現方式。。。程式碼很簡單，對就這一句！ <input type="file" acce
實現antd下拉框動態新增內容（與資料庫互動）
antd下拉控制元件的動態內容新增（與資料庫互動） antd這個框架給開發帶來了極大的方便，但同時，我認為還有一些不方便的地方：常用的邏輯在文件中沒有體現。需要前端開發經驗的人才能快速上手，而我剛剛接觸這個東西，antd基本將所有常用的控制元件全都封裝了，包括select下拉框，在以往的開發當中，我常常將下
改變dede圖片上傳路徑（商品-縮圖）去掉/allimg/ymd/
include\common.inc.phpline185://上傳的普通圖片的路徑,建議按預設//lyy $cfg_image_dir = $cfg_medias_dir.'/allimg';$cfg
用JAVA實現一個爬蟲，爬取知乎的上的內容（程式碼已無法使用）
在學習JAVA的過程中寫的一個程式，處理上還是有許多問題，爬簡單的頁面還行，複雜的就要跪. 爬取內容主要使用URLConnection請求獲得頁面內容，使用正則匹配頁面內容獲得所需的資訊存入檔案，使用正則尋找這個頁面中可訪問的URL，使用佇列儲存未訪問的URL
如何使用Graphics2D在一張圖片上畫線（包括箭頭）
有這樣一個需求，在一張圖片上畫幾條線並儲存，如圖所示： 已知各個點的x,y座標，座標範圍是[0.000,1]，即將橫縱方向分成1000份。 我們可以使用java.awt.Graphics2D的庫來實現。 Graphics2D在Graphics類提供繪製各種基本的幾何圖形的基礎上進行