标签:near splay img com nic inline ima break tps
linear-gradient
实现,但是它只能设在background-image
属性上background-clip
的含义是背景图片切割,当值设为text
时,背景图片将根据文字轮廓进行切割webkit
内核下一定要加前缀才生效注:以下为vue代码,如果你在工程项目中设置了postcss自动添加浏览器前缀(autoprefixer),此处可以不添加
-webkit
前缀;否则,必须添加。
<template>
<div>
<h1>loaning-moon</h1>
</div>
</template>
<style lang="less" scoped>
h1 {
font-size: 60px;
background-image: linear-gradient(to bottom, red, yellow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
我尝试了火狐,谷歌,safari,手机QQ浏览器,手机百度浏览器,安卓自带浏览器,均能正常显示。从Can I use官方查询的数据来看,连ie也能正常使用,所以我认为这个属性的兼容性是非常不错,可以放心使用,唯独要注意-webkit
前缀的问题。
标签:near splay img com nic inline ima break tps
原文地址:https://www.cnblogs.com/zhangnan35/p/12822599.html