中山 网站建设一条龙全包,做盗版网站的,企业官网是什么意思,上海模板建站源码我们在学习CSS3时#xff0c;一个背景属性background-clip用来对背景进行裁剪#xff0c;即指定背景绘制的区域#xff0c;通常我们使用的几个属性如下#xff1a;值说明border-box默认值。背景绘制在边框方框内#xff08;剪切成边框方框#xff09;。padding-box背景绘…我们在学习CSS3时一个背景属性background-clip用来对背景进行裁剪即指定背景绘制的区域通常我们使用的几个属性如下值说明border-box默认值。背景绘制在边框方框内剪切成边框方框。padding-box背景绘制在衬距方框内剪切成衬距方框。content-box背景绘制在内容方框内剪切成内容方框。这几个属性值我们不再详述不太清楚的童鞋可以自行查阅资料并试验。偶尔发现background-clip属性还有一个非标值text用来指定背景的绘制区域为指定区域的前景文本区域Non-standard method of clipping a background image to the foreground text.经过在caniusehttps://caniuse.com/网站查询发现目前基本所有浏览器都支持。在一些老版本的谷歌或者火狐浏览器下我们可以使用前缀-webkit-。示例如下p classtestclip我的背景是图片/p.testclip{font-size:90px;font-weight:900;background-image:url(/images/1.png);background-size:cover;
}我们在不添加background-clip属性的情况下浏览页面效果如下下面我们来添加属性css代码修改如下.testclip{font-size:90px;font-weight:900;background-image:url(/images/1.png);background-clip:text;-webkit-background-clip:text;background-size:cover;
}加上属性后心里是不是有些小激动测试一下看看效果不佳不是我们想要的效果如下图咋闹呢想想看文本是有颜色的默认是继承自父容器的颜色黑色。茅塞顿开把背景色改为透明色呢于是我们在css代码中添加透明色如下.testclip{font-size:90px;font-weight:900;background-image:url(/images/1.png);background-clip:text;-webkit-background-clip:text;background-size:cover;color:transparent;
}再次浏览效果如下是不是有些酷以后这些小问题就不用麻烦Photoshop了吧
