background-clip属性

background-clip （背景裁剪）设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。
background-clip: text;-webkit-background-clip: text;color: transparent;	以文字的范围来裁剪背景图片

border-box

背景延伸至边框外沿（但是在边框下层）

    <style>.div1{width: 346px;height: 346px;padding: 10px;background-color: rgb(0, 255, 255);background-clip: border-box;border: 10px dashed rgb(78, 164, 80);}</style>
</head>
<body><div class="div1"><img src="./src/assets/hmbb.png" alt=""></div>
</body>

content-box

背景绘制在内容方框内（剪切成内容方框）

    <style>.div1{width: 346px;height: 346px;padding: 10px;background-color: rgb(0, 255, 255);background-clip: content-box;border: 10px dashed rgb(78, 164, 80);}</style>
</head>
<body><div class="div1"><img src="./src/assets/hmbb.png" alt=""></div>
</body>

padding-box

背景绘制在衬距方框内（剪切成衬距方框）

    <style>.div1{width: 346px;height: 346px;padding: 10px;background-color: rgb(0, 255, 255);background-clip: padding-box;border: 10px dashed rgb(78, 164, 80);}</style>
</head>
<body><div class="div1"><img src="./src/assets/hmbb.png" alt=""></div>
</body>

background-clip: text;

以文字的范围来裁剪背景图片

    <style>p{color: transparent;/* 适配内核为webkit的浏览器（Google） */-webkit-background-clip: text;background-clip: text;line-height: 30px;background-image: url(./src/assets/hmbb.png);}</style>
</head>
<body><p>这是一段以文字的范围来裁剪背景图片</p>
</body>

以线性渐变实现彩虹字体

    <style>p{color: transparent;/* 适配内核为webkit的浏览器（Google） */-webkit-background-clip: text;background-clip: text;line-height: 30px;background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);}</style>
</head>
<body><p>这是一段用线性渐变实现的彩虹字体哦</p>
</body>

background-origin属性

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

background-clip、background-origin属性及彩虹字体的实现相关推荐

html中加粗的字体如何改细,css font-weight 属性设置文本字体的粗细
css font-weight介绍在CSS中,font-weight属性用来定义字体粗细.font-weight属于css1版,所以所有主流浏览器都支持font-weight属性. 初学者要注意,字 ...
CSS常用属性-3.1字体文字-1.字体font-family-2.尺寸font-size-3.样式font-style-4.粗细font-weight-5.简写属性font
1.字体使用font-family属性来定义文字的字体属性值为字体的名称,可以设置多个字体名称,浏览器会按照顺序使用它第一个支持的字体(本地电脑有没有安装改字体) 相当于字体优先级列表介绍几个 ...
android background大全,Background安卓版-Background壁纸预约 _5577安卓网
Background是一款全新的手机壁纸应用,软件运行在安卓平台,软件包含了丰富的高质量的手机壁纸应用,是少数派推荐的适合安卓手机的壁纸应用,那么想让自己手机更酷炫的用户使用体验吧! 温馨提示应用还 ...
html 彩虹字体,拿来就用，超炫彩虹字体送你了
原标题:拿来就用,超炫彩虹字体送你了还记得小编以前提过的2017设计趋势吗?里面就说到了色彩的渐变和叠加是目前的潮流.其中运用的最广泛的就有彩虹字.一般情况下,要做好彩虹字,那就需要设计师一个一个字 ...
ApachePOI导出exce,设置单元格风格的属性和设置字体风格的属性的两个工具类，POI宽度和excel 像素转换
设置单元格风格的属性和设置字体风格的属性的两个工具类,POI宽度和excel 像素转换 /*** 功能:设置单元格风格的属性* */public static HSSFCellStyle SetCel ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
一款彩虹字体发布，为了纪念创造LGBTQ彩虹旗的人逝世
作者:Q葩小玉浏览次数:2522 17/04/27 08:26 奥美的设计团队.字体公司 Fontself 与组织每年纽约市性少数平权游行的 NYC Pride. 纽约的 LGBT 电影节 Newf ...
android preference-headers 字体颜色,android 批改preference中view属性(title,summary字体颜色等)...
当前位置:我的异常网» Android » android 批改preference中view属性(title,summary字 android 批改preference中view属性(title,s ...
怎样通过font属性控制CSS字体样式？
为了更方便地控制网页中各种各样的字体,CSS提供了一系列的字体样式属性,具体如下. (1)font-size属性:字号 font-size属性用于设置字号,该属性的属性值可以为像素值.百分比数值.倍率 ...

background-clip、background-origin属性及彩虹字体的实现

文章目录

background-clip属性

border-box

content-box

padding-box

background-clip: text;

background-origin属性

background-clip、background-origin属性及彩虹字体的实现相关推荐

最新文章

热门文章