css 内核切割样式、内核

川长思鸟来 2021-07-24 14:20 485阅读 0赞

背景切割
    
    -webkit-background-clip:text;  将文本内容下的背景切下，
    只保留文本内容下的背景，其他丢掉，配合透明色，可实现酷炫效果
    
    -webkit-background-clip:border-box;   留下边框以内的背景
    -webkit-background-clip:padding-box;   留下内边距以内的背景
    -webkit-background-clip:content-box;   留下内容区域背景

内核：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]代码示例：

<html>
    	<head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<style type="text/css">
    				div{ 
    				width:400px;
    				background-color: red;
    				height:400px;
    				border:solid 30px orange;
    				background-image:url(img/灭霸.jpg);
    				margin:30px auto;
    				padding:200px;
    				font-size:50px;;
    				color:transparent;
    				-webkit-background-clip: padding-box;
    				
    			}
    			
    			body:hover div{ 
    				width:220px;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			王者荣耀
    		</div>
    
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/5ef72d0daee5450e834bcf716c2fbd9b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，485人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spark 内核 (一) --------- Spark 内核概述

目录一、Spark 核心组件回顾 1. Driver 2. Executor 二、Spark 通用运行流程概述 --------

逃离我推掉我的手/ 2024年04月07日 13:17/ 0 赞/ 43 阅读

相关 Linux内核之内核同步

一、同步介绍 1、临界区与竞争条件所谓临界区（ critical regions ）就是访问和操作共享数据的代码段。为了避免在临界区中并发访问，编程者必须保证这

傷城~/ 2022年11月27日 06:29/ 0 赞/ 253 阅读

相关 Linux 内核 vs Windows 内核

Windows 和 Linux 可以说是我们比较常见的两款操作系统的。 Windows 基本占领了电脑时代的市场，商业上取得了很大成功，但是它并不开源，所以要想接触源码

野性酷女/ 2022年10月09日 13:27/ 0 赞/ 194 阅读

相关内核之旅 --- 内核模块学习1---内核模块参数传递

内核模块的参数传递：内核模块在加载时是可以添加参数的，但是支持类型有所改变。首先，内核模块中的变量如果需要使用外界传递的参数需要使用特定的宏 module\_par

不念不忘少年蓝@/ 2022年08月05日 08:50/ 0 赞/ 431 阅读

相关内核之旅起航---简单内核模块和内核编程规则

你的名字/ 2022年08月05日 08:40/ 0 赞/ 181 阅读

相关定制webkit内核浏览器的滚动条样式

终于发现非IE内核的浏览器也可以定制滚动条样式的，下图里那些古怪的滚动条全都是用CSS定制出来： ![1339143485_3914.jpg][] 这里有详细说明：[

╰半橙微兮°/ 2022年06月11日 05:28/ 0 赞/ 160 阅读

相关浏览器内核五大浏览器内核

![20180610165658976][] 浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览

Dear 丶/ 2022年05月23日 13:55/ 0 赞/ 233 阅读

相关内核引擎

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blin

柔光的暖阳◎/ 2022年04月22日 13:52/ 0 赞/ 178 阅读

相关 css 内核动画轮播

动画通过关键帧来模拟动画设置动画样式法一:@keyframes 自定义名称{ n%{ c

电玩女神/ 2021年07月24日 16:44/ 0 赞/ 362 阅读

相关 css 内核切割样式、内核

背景切割 -webkit-background-clip:text; 将文本内容下的背景切下，只保留文本内容下的背景，其他丢掉，配合透明色

川长思鸟来/ 2021年07月24日 14:20/ 0 赞/ 486 阅读