用图片替换文本

最新推荐文章于 2021-05-31 16:57:44 发布

程小秋

最新推荐文章于 2021-05-31 16:57:44 发布

阅读量657

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/golden_wheat/article/details/77703567

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

<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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用图片替换文本

用图片替换文本（使用背景图片替换掉文本内容）第一种方法（我认为最好的一种方法） .content { text-indent: 100%;/*缩进父元素宽度的100%*/ white-space: nowrap;/*不换行*/ overflow: hidden;/*隐藏多出去的文字*/ background: url
复制链接

扫一扫

专栏目录