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内核的浏览器,兼容性差。

原文地址:https://www.cnblogs.com/hellocd/p/textbg.html

时间: 2024-10-10 09:24:51

CSS3制作文字背景图的相关文章

web前端入门到实战:CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下: 核心代码如下: <div class="container"> <div class="pic"></div>

CSS3制作文字半透明倒影效果

/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/ 效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: Html代码   <div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"&g

#css3# 可以多背景图设置

今天无意发现css3可以多背景图设置,省去了多添加标签或伪类来创造,gooood,真是越来越智能,要紧跟是带你啊. #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } 前面url的图片会在上面层. 原文地址:https://www.cnblogs.co

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不

如何用PS制作花型背景图

今天教大家制作一个花型背景吧!先看下图下效果图吧: 步骤1 新建一个2000*2000像素的画布,背景色填充自己喜欢的颜色即可!最好新建一个画布中心参考线哦,在画布中心画一个白色的椭圆形并居中,上下在画布边缘. 步骤2 双击弹出混合选项的椭圆形状,设置混合模式为柔光,不透明度为50%,填充不透明度为75%. 步骤3 添加白色描边,设置大小为3像素,位置外部,混合模式柔光. 步骤4 重复的椭圆形,并以30°围绕中心旋转画出6个椭圆形.并所有6个椭圆形形状合并成一个组(Ctrl G),并把组命名为“

web前端小案例-css3制作浏览器背景渐变背

知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等. css代码: <style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px; } </style> JavaScript代码: <script> function convert(sRgb){ /*rgb转换成HEX*/ var sRgb=sRgb; var sHe

基于HTML5自定义文字背景生成QQ签名档

分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片,你也可以下载这张拥有你QQ签名档的图片. 在线预览   源码下载 实现的代码. html代码: <canvas id="mycanvas" width="1280" height="512"></canvas> 内容:<

CSS3制作渐变文字

CSS3制作渐变文字(-webkit-mask-image 与 -webkit-background-clip) 今天去css-tricks无意间发现了标题运用渐变文字这一效果,这使的想起了webkit内核浏览器的一些私有属性.而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-webkit-mask-image与-webkit-background-clip. 既然称之为webkit私用属性,我想大家都懂的,要用webkit内核浏览器才能看到效果.Chrome/Safari,这两个

如何使用 css3 transform 属性来变换背景图?

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)