CSS3怎么为文字添加背景?

这两天在写官网,标题标语之类的文字都是带有流光溢、炫酷图案的文字

大致就像苹果官网上的那些slogan吧,可不是简单的渐变色之类哦

但是由于使用了CSS3属性,所以要考虑到兼容性,仅Webkit内核的浏览器适用

效果如下:

设计师随后给我发来了一个图案background.jpg:

就拿这张图做背景,即可实现需求,

具体操作如下:


<!DOCTYPE html>
<html>
 
<head>
    <title></title>
</head>
<style type="text/css">
    * {
        font-family: fantasy;
        font-size: 1.8em;
    }
 
    div {
        height: auto; //根据需求而定
        width: auto;//根据需求而定
        background: url(background.jpg) no-repeat;  // 背景图
        background-origin: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
         
    }
</style>
 
<body>
    <div>影像随用随取</div>
</body>
 
</html>

 

这个解决方案是参考一位网友的,他在文章中提到:

"由于是css3的,所以有些浏览器不支持,而且text-till-color:transparent是Webkit内核的私有属性,所以其他非webkit浏览器可能不行."

抽空查了查css3,

background-clip指背景剪裁的位置.

比如:通常为盒子添加背景色后,整个盒子包括边框在内,都后有背景色;

可一旦添加上background-clip属性,

如background-clip: padding-box; 那么背景只在padding到content的区域显示,边框不显示背景图;

如 background-clip: content-box;那么背景只显示在content区域,其以外均不显示背景图;

上面代码background-clip: text;表示只为文本添加背景图

background-origin指背景图显示的位置,

padding-box背景图像填充框的相对位置
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框

这个属性私以为也可以不写~~~

text-fill-color,文本填充颜色,通常设为transparent,透明色; 这个属性对于我写的那个效果,私以为也可以不写~~~

最常见的渐变色文字效果,就脱离不了text-fill-color的功能

background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值