CSS3制作文字背景图

Posted hellocd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3制作文字背景图相关的知识,希望对你有一定的参考价值。

文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。

方法一、利用CSS3属性mix-blend-mode:lighten;实现

使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下:

技术图片

核心代码如下:

<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>
.pic 
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;

 
.text 
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;

 

方法二、-webkit-background-clip:text;

使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
<div class="pic2">
    image
</div>
.pic2
    width: 500px;
    height: 500px;
    margin: 40px auto;
    background: url("1.jpg") no-repeat center center;
    background-size: cover;
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    line-height: 500px;
    /*很重要*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
缺点:只支持webkit内核的浏览器,兼容性差。

以上是关于CSS3制作文字背景图的主要内容,如果未能解决你的问题,请参考以下文章

怎么制作banner

css3 -- 背景图处理

CSS3的新特性二

PPT2016制作半填充效果的文字封面页

网页制作中,我使用滤镜,把背景颜色黑色半透明了,但它也把我黑色背景上的字体也给半透明了,求高手指...

css中的背景图怎么改变大小