图片上的这种效果怎么实现？_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

图片上的这种效果怎么实现？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:25 PM

图片本来是这样的

把指针发在图片上面，就出现这么一层文字
求解？

回复讨论(解决方案)

这个就是感应鼠标的图片遮罩动画效果，给你个网上的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>感应鼠标的图片遮罩动画效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">html, body, div,ul, li {margin: 0;padding: 0;}div.examples_body {width: 750px;margin: 0px auto;clear: both;overflow: hidden;}.bannerHolder {width: 726px;margin: 20px 0 15px 0;padding: 20px 10px 20px 10px;background-color: #f7f7f7;border: 1px solid #eee;overflow: hidden;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}.bannerHolder li {list-style: none;display: inline;}.banner {position: relative;width: 125px;height: 100px;overflow: hidden;float: left;display: inline;margin: 0 10px}.banner img {display: block;border: none;}.banner div {position: absolute;z-index: 100;background-color: #222;width: 60px;height: 60px;cursor: pointer;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;}.banner .cornerTL {left:-63px;top:-63px;}.banner .cornerTR {right:-63px;top:-63px;}.banner .cornerBL {left:-63px;bottom:-63px;}.banner .cornerBR {right:-63px;bottom:-63px;}.banner p {display: none;left: 0;top: 57px;width: 100%;z-index: 200;position: absolute;font-family: Tahoma, Arial, Helvetica, sans-serif;color: #FFF;font-size: 11px;text-align: center;cursor: pointer;}</style><script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script><script type="text/javascript">$(document).ready(function(){$('.banner div').css('opacity',0.4);$('.banner').hover(function(){var el = $(this);el.find('div').stop().animate({width:200,height:200},'slow',function(){el.find('p').fadeIn('fast');});},function(){var el = $(this);el.find('p').stop(true,true).hide();el.find('div').stop().animate({width:60,height:60},'fast');}).click(function(){window.open($(this).find('a').attr('href'));});});</script></head><body><div class="examples_body"><ul class="bannerHolder"><li><div class="banner"><a href="#" target="_blank"><img src="/static/imghw/default1.png"  data-src="http://www.veryhuo.com/uploads/common/images/p2.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" alt="The Best Designs" ></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></div><div class="cornerTR"></div><div class="cornerBL"></div><div class="cornerBR"></div></div></li><li><div class="banner"><a href="#" target="_blank"><img src="/static/imghw/default1.png"  data-src="http://www.veryhuo.com/uploads/common/images/p3.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" alt="The Best Designs" ></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></div><div class="cornerTR"></div><div class="cornerBL"></div><div class="cornerBR"></div></div></li><li><div class="banner"><a href="#" target="_blank"><img src="/static/imghw/default1.png"  data-src="http://www.veryhuo.com/uploads/common/images/p3.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" alt="The Best Designs" ></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></div><div class="cornerTR"></div><div class="cornerBL"></div><div class="cornerBR"></div></div></li><li><div class="banner"><a href="#" target="_blank"><img src="/static/imghw/default1.png"  data-src="http://www.veryhuo.com/uploads/common/images/p4.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%" alt="The Best Designs" ></a><p class="companyInfo">Visit The Best Designs</p><div class="cornerTL"></div><div class="cornerTR"></div><div class="cornerBL"></div><div class="cornerBR"></div></div></li></ul></div></body></html>

登入後複製

一个透明层放图片上就可以了。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。