精华内容
下载资源
问答
  • HTML让文字在图片上显示的几种方法
    千次阅读
    2021-02-26 16:10:37

    原链接:https://blog.csdn.net/wu920604/article/details/53781377


     第一种方式是image 作为背景图片,即:background:url(".......");

     例如如下代码块:
     
    <div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div>

     
     第二种方式是将img块与文字块(文字块采用span标签显示)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:
    <div style="position: relative; width: 170px; height: 89px;">
    <img src="loading.gif" width="170" height="89" alt="">
    <span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>
    </div> 


     
     第三种方式是将img块与文字块(文本块存放在div中)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:
    <div style="position:relative;">
      <img src="loading.gif" />
      <div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>
    </div>


     
     
     
      如果想限制img 标签的最大宽高,可以用max-width 和 max-height 这两个属性,如下代码:
     
     
     

      <img src="......" style="max-width:100px; max-height:100px" />
     

    更多相关内容
  • 字层浮在图片做一些当鼠标移到图片上显示描述信息功能是可以使用到,下面与大家分享个实例代码,有类型需求的朋友可以参考下哈,希望对大家有所帮助
  • 今天要分享一款基于HTML5和CSS3的图片特效,该图片特效非常实用,可以你网页图片在鼠标滑过时在图片上方浮现一些描述文字,该描述文字在展现出来的时候有淡入淡出的动画效果,同时描述文字的样式也可以自定义...
  • 如何让文字在图片上滚动要想实现让文字在图片上滚动,可以按下方法操作:点击发表文章,出现文章发表框,把显示源代码的小框勾,然后把下面这个代码粘贴上去:borderColor=#FF0011 height=330 width=500border=1&...

    如何让文字在图片上滚动

    要想实现让文字在图片上滚动,可以按下方法操作:点击发表文章,出现文章发表框,把显示源代码的小框勾上,然后把下面这个代码粘贴上去:

    borderColor=#FF0011 height=330 width=500

    border=1>

    background=背景图片链接地址>

    代码说明:

    代码的第一行图片框的属性,borderColor、height、width和border几个属性值可以进行修改,他们分别代表边框颜色,边框的高度,边框的宽度和边框的粗细值,其中边框颜色属性必须为十六进制数,或者为red、yellow、blue等。

    然后进入图片网站,复制你选中的图片地址,粘贴在背景图片链接前就行了。可以直接选用你博客相册里的图片,方法是,点击相册,点击缩略图,双击你要选用的图片,这时出现在地址栏的就是该图片的链接地址,复制后粘贴在代码中“背景图片链接地址”处即可。

    然后在显示源代码前点击一下,撤掉小勾,图片成功出现,就可以自由自在地在上面编辑文字。文字编辑完后,再把显示源代码的小框勾上,然后在文字代码前加上下面这个代码:

    scrollAmount=1 scrollDelay=77 direction=up width=270

    height=77

    οnmοuseοut="this.start()"

    οnmοuseοver="this.stop()">

    代码说明:

    1、width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。这几个值设过之后,也可以直接在图片上调整小框的大小。

    2、direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

    只要把这两个代码正确使用好,就能做文字在图片上滚动的效果,如下例《题世外桃源诗》。希望大家都能顺利做出美丽而有特色的页面。如有疑问,欢迎再来交流。

    ?/P>

    山青水秀雾似纱炊烟起处有农家游人争向湖中去世外桃源美如画

    (木木写作于2006年11月16日)

    相关文章链接

    展开全文
  • 图片上悬浮文字

    2017-09-11 20:33:58
    网上查阅之后有三种解决办法:第一种方法是把图片作为背景,上面写文字。这种方法经过简单尝试之后不行,也没有找到原因;后两种方法利用的是html中绝对位置和相对位置的区别实现的,有一个简单的可以运行的小例子
  • 主要介绍了微信小程序实现点击页面出现文字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 文字图片出现在同一行或者同一个div里面的时候,浏览器中运行出来的显示效果往往是不同的行,那么我们怎么才能css中控制他们同一行显示呢
  • Html 让文字显示在图片的上面

    千次阅读 2021-06-11 18:15:16
    此可以控制背景图片的横向和纵向的平铺:background-repeat : none; 不进行平铺background-repeat : repeat-x; 横向x轴进行平铺background-repeat : repeat-y; 横向y轴进行平铺background-...

    如题:

    第一种方式便是将 image 作为背景图片,即:background-image:url(".......");

    在此可以控制背景图片的横向和纵向的平铺:

    background-repeat : none;  不进行平铺

    background-repeat : repeat-x;  横向x轴进行平铺

    background-repeat : repeat-y;  横向y轴进行平铺

    background-repeat : repeat;  横向x轴与纵向y轴都进行平铺,这也是默认情况的状态

    第二种方式是将img块与文字块放在同一个div 中,然后设置他们之间的位置,例如如下代码块:

    ....

    haha

    其余的位置再根据实际情况进行微调就好~~

    关于position中relative 以及 absolute 属性值的区别:

    position:absolute这个是绝对定位; 是相对于浏览器的定位。 比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如:

    如果想限制img 标签的最大宽高,可以用max-width 和 max-height 这两个属性,如下代码:

    ......

    展开全文
  • bootstrap 让文字显示响应式图片上

    万次阅读 2017-11-01 21:53:39
    有两种办法:1)让图片做为背景,文字直接布局在图片上; 2)让图片用img标签插入,文字相对布局在图片上; 先说说第一种办法的问题,要想背景图片完全显示出来,非得设置外层容器的高度,这样就失去了响应式; ...

    在这个位置折腾了一会,半天没有出效果。

    有两种办法:1)让图片做为背景,文字直接布局在图片上;

    2)让图片用img标签插入,文字相对布局在图片上;

    先说说第一种办法的问题,要想让背景图片完全显示出来,非得设置外层容器的高度,这样就失去了响应式;

    例如:

    #content-sec3 {
        position: relative;
        max-width: 100%;
        height: auto;
        background: url('../images/homepage/accssorybg.jpg') no-repeat top center;
        background-size: 100% auto;
        background-color: cadetblue;
        text-align: center;
    }
    高度设置auto 或一个固定值都达不到效果,要么图片显示不全,要么显示有多出来的白边;

    最后是用第二中方式实现的,但也有不完美的地方,文本的水平居中成了问题,折腾了半天用脚本解决了,如有更好办法的朋友,希望指教。

    做法如下:

    html结构:

    <div id="content-sec3">
                <img class="img-responsive" src="resources/images/homepage/accssorybg.jpg" />
                <div id="content-sec3-adjust" style="position: absolute; top: 0; left: 50%;">
                    <h2 class="title">Vpanel配件 </h2>
                    <p class="title-sub-line hidden-sm hidden-xs"> Vpanel ACCESSORIES </p>
                    <p class="title-more">查看更多 <img src="resources/images/homepage/right.png" /> </p>
                </div>
            </div>

    css 样式:

    #content-sec3 {
        position: relative;
        max-width: 100%;
        height: auto;    
        background-size: 100% auto;   
        text-align: center;
    }
    
        #content-sec3 .title {
            margin-top:5px;
            font-family: 微软雅黑;
            font-size: 20px;
            color: #333333;
        }
    
        #content-sec3 .title-sub-line {
            margin-top:15px;
            margin-bottom: 18px;
            font-family: 微软雅黑;
            font-size: 12px;
            color: #CCCCCC;
            text-align: center;
        }
    
        #content-sec3 .title-more {
            margin-bottom: 10px;
            font-family: 微软雅黑;
            font-size: 12px;
            color: #2E84E9;
            text-align: center;
            cursor:pointer;
        }
     水平居中脚本:

     var init = function () {
                var _bg3width = $("#content-sec3-adjust").width();
                $("#content-sec3-adjust").css("margin-left", _bg3width * -1 / 2 + "px");
            };

    当window 窗口化改变大小时重新调用上面的脚本就可以了,

       $(window).resize(function () {
                init();
            });


    展开全文
  • js鼠标放到图片上会滑出提示文字.rarjs鼠标放到图片上会滑出提示文字.rarjs鼠标放到图片上会滑出提示文字.rarjs鼠标放到图片上会滑出提示文字.rarjs鼠标放到图片上会滑出提示文字.rarjs鼠标放到图片上会滑出提示文字...
  • 弹出的 UIMenuItem 中加入图片。UIMenuItem 多用于交互时向用户提供简单的菜单按钮,比如长按UITextView中的文字,会出现 UIMenuItem 提供复制、选择文字等功能。
  • 鼠标hover 以后,图片上面出现一个遮罩透明度变化,显示设置好的文字,完全使用css 实现,效果如下,喜欢的朋友可以参考下
  • 面向对象function $(id){return typeof id === "string" ? document.getElementById(id) : id;}function $$(oParent, elem){return (oParent || document).getElementsByTagName(elem);}function imgLight(id){this....
  • 前端鼠标移动到图片上图片加个阴影背景以及文字,使之更好看
  • 去除图片上文字出现马赛克?

    千次阅读 2021-02-22 22:44:59
    写一篇文章时,我们想把别人的图片拿来套用。我想把济南市这三个字去掉。 图片1去除济南市 出现了马赛克情景。出现这种情况的原因是,这张图片背后的图层就是马赛克图层。 图片2 所以我们只要新建...
  • DIV CSS鼠标悬停没有文字内容图片上图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用...
  • 鼠标悬停图片上显示文字 在线演示 www.divcss5.comimg {border: 0}/* css 注释说明:设置图片边框为0 */body {behavior: url("csshover.htc");text-align: center;}/* css注释说明:兼容ie6 支持标签使用hover */....
  • 1、双击“天若OCR文字识别.exe”可执行程序,会有一个小图标出现在左下角任务栏中; 2、鼠标放到小图标会提示“上级开始截图识别”,然后双击该图标,即可选择区域进行OCR识别
  • jQuery带标题文字介绍的图片轮播插件,代码很简洁的一个焦点图切换效果,本例中是以字体图标代替图片,鼠标悬停左右箭头一张下一张切换按钮会出现
  • 纯css3 transition鼠标悬停图片文字动画显示 纯css3 transition鼠标悬停图片文字动画显示
  • 前台代码实例,鼠标悬停在图片等标签动态提示显示文字或者图片实例
  • 使用Python在图片上增加文字

    千次阅读 2021-12-30 17:59:38
    一些应用场景中,我们需要将一些自定义的文字内容附加到某张图片中。本篇文章将对这一功能进行实现。 import PIL from PIL import ImageFont,Image,ImageDraw #设置字体,如果没有,也可以不设置 font = ...
  • 第二步:将想要覆盖在文字上图片,Ctrl+j复制一层,然后按v拖到这个当前工作页面,并把图片放在文字图层图片大小可Ctrl+t自由定义 第三步:点击文字图层,然后按住Alt把鼠标移动到文字图层与图层一之间,会...
  • 强烈的思乡之情中,诗人台北厦门街的旧居内写下了这首诗。 二 书法 该诗写于1972年。余光中的祖籍是福建永春,他于1949年离开大陆去台湾。[5]当时由于政治原因,台湾和大陆长时间的隔绝,致使余光中多年没有回过...
  • 这是一款简单的jQuery鼠标悬停图片遮罩显示标题文字特效,遮罩层跟随鼠标移动方向出现
  • delphi调用百度API实现图片文字识别

    热门讨论 2017-12-15 12:23:43
    网上看到有人提示indy控件默认会对参数重新编码,把这个属性关闭后图片上传正常。 具体属性:httpoptions下的hoforceencodeparams关闭。 图片编码为base64,然后urlencode一下即可。 3.识别完成后的中文...
  • 文字在图片上

    千次阅读 2018-11-06 15:08:40
    &lt;!DOCTYPE html&gt; &lt;...gt;...将文字在图片上&lt;/title&gt;  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;  &a
  • 面向对象function $(id){return typeof id === "string" ? document.getElementById(id) : id;}function $$(oParent, elem){return (oParent || document).getElementsByTagName(elem);}function imgLight(id){this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 236,912
精华内容 94,764
关键字:

如何让文字出现在图片上