用图片替换文本

来源：互联网发布：免费网站源码编辑：程序博客网时间：2024/06/05 08:32

用图片替换文本（使用背景图片替换掉文本内容）

第一种方法（我认为最好的一种方法）

<style>   .content {        text-indent: 100%;/*缩进父元素宽度的100%*/        white-space: nowrap;/*不换行*/        overflow: hidden;/*隐藏多出去的文字*/        background: url(https://ps.ssl.qhimg.com/sdmt/205_135_100/t01b8b08f69f74e48ec.jpg) no-repeat;   }</style>

<body>    <p class="content">把我替换成图片</p></body>

第二种方法：

<style>    .content {        width: 205px;        height: 135px;        background: url(https://ps.ssl.qhimg.com/sdmt/205_135_100/t01b8b08f69f74e48ec.jpg) no-repeat;    }    .content span {        display: none;    }</style>

<body>    <p class="content">        <span>把我替换成图片</span>    </p></body>

内容外面需要包裹一个标签，把图片加在外面的大标签上

第三种方法：

<style>    .content {        background: url(https://ps.ssl.qhimg.com/sdmt/205_135_100/t01b8b08f69f74e48ec.jpg) no-repeat;        text-indent: -9999px;    }</style>

<body>     <p class="content">把我替换成图片</p></body>

第四种方法：

<style>    .content {        width: 205px;        height: 135px;        background: url(https://ps.ssl.qhimg.com/sdmt/205_135_100/t01b8b08f69f74e48ec.jpg) no-repeat;    }    .content span {        display: block;        width: 0;        height: 0;        overflow: hidden;    }</style>

<body>     <p class="content">         <span>把我替换成图片</span>     </p></body>

阅读全文

0 0