首页
问答
词典
文集
工具
退出登录
登录
我要提问
搜索
问答首页
怎样利用 CSS 的 clip 属性制作彩色文字?
正
2
0
1
3
-
0
9
-
0
9
1
7
:
4
0
:
0
5
版本:
1
/
1
2
0
1
3
-
0
9
-
0
9
1
7
:
4
0
:
0
5
版本:
1
/
1
彩色
clip
CSS
属性
更多标签...
文字
制作
版权归作者所有。任何形式转载须联系作者获得授权。
作者:
正解网
来源:正解网
链接:
http://localhost:9000/question/7987e575
投票
6
好问题
烂问题
修改
分享
扫码分享
分享到新浪微博
分享给QQ好友
分享到QQ空间
复制网址
OK了,粘贴即可!
问题状态
正解:
1
个
解答:
1
个
同问:
0
人
浏览:
11
次
相关问题
怎样用 CSS 制作文字阴影效果?
正解:
1
解答:
1
同问:
0
如何使用 CSS 制作树状目录?
正解:
1
解答:
1
同问:
0
Dreamweaver 如何修正图片与文字的错行?
正解:
1
解答:
1
同问:
0
怎样用 CSS 制作圆角效果?
正解:
1
解答:
1
同问:
0
在 Dreamweaver 中如何用 CSS 制作个性化的按钮?
正解:
1
解答:
1
同问:
0
修改提问
怎样利用 CSS 的 clip 属性制作彩色文字?
彩色
clip
CSS
属性
文字
制作
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
1
个解答
正
2
0
1
3
-
0
9
-
0
9
1
7
:
4
0
:
0
5
版本:
1
/
1
2
0
1
3
-
0
9
-
0
9
1
7
:
4
0
:
0
5
版本:
1
/
1
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
2372 人已浏览过此解答
免费查看解答
×
打开手机微信扫一扫免费查看解答
3步免费查看解答
2步免费查看解答
1️⃣ 长按保存下方小程序码
2️⃣ 打开手机微信的扫一扫
3️⃣ 点击右上角相册选取此码
1️⃣ 长按下方的小程序码
2️⃣ 在弹出的菜单中识别图中的小程序码
小程序码已失效
👉请点此刷新👈
60
s
自动显示解答
修改解答
用 clip 属性制作彩色文字主要是通过 clip:rect (top right bottom left) 来实现,其中上右下左分别是按照四个方向设定的数值,比如 clip: rect(0 0 18px 0); 。 clip 除了 rect (top, right, bottom, left) 这个值外,还有另一个值,即 auto,它就代表无裁切效果。 彩色文字的原理就是让两排不同颜色的文字重合在一起,通过使用 clip 属性,分别将文字的上下部分进行裁切,从而达到彩色效果。 具体方法如下: ##操作步骤 1、采用文字相对值 em 作为单位,设置页面文字大小为 12 像素左右,方法为: body { font-size:75%; } 2、然后设置一个 div 作为容器,让它居中显示,背景为灰色,最重要的是让它的定位方式为相对定位,这样才能方便文字的定位。 #container { width:28em; height:8em; position:relative; margin:0 auto; background: #F6F6F6; border:1px solid #000; } 3、接下来就是两个相同文字的样式和定位,第一行和第二行文字除了字体颜色和裁切的位置需要区分,其它定义是完全一样的,所以可以将它们一次同时定义好: .textTop, .textBottom { position: absolute; left:2em; top:1em; font:bold 26px Arial, Helvetica, sans-serif; white-space:nowrap; } 文字的绝对定位是必不可少的,这样才能让它们重合,white-space:nowrap; 的作用是不让文字折行显示。 4、接下来定义它们各自的颜色和裁切位置: .textTop { color: #CC0000; clip: rect(auto auto 18px auto); } .textBottom { color: #333333; clip: rect(18px auto auto auto); } 上面一行文字颜色为 #CC0000,裁切值按照上右下左的顺序为:上,无裁切;右,无裁切;下,裁切 18 像素;左,无裁切; 下面一行文字为 #333333 ,裁切值按照上右下左的顺序为:上,裁切 18 像素;右,无裁切;下,无裁切;左,无裁切; 5、然后再把 HTML 代码加入到页面中: <div id="container"> <a href="http://www.baidu.com" target="_blank" class="textTop">百度baidu</a> <a href="http://www.baidu.com" target="_blank" class="textBottom">百度baidu</a> </div> 将以上 CSS 和 HTML 代码都添加到网页中后预览一下,效果应该和图中一致。 ![](/image/40059e900fa8b6d33282772250a044a8.png)
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
我的解答
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
∧
回顶部