【隐藏和裁剪：overflow与clip】CSS实现一字两色/多色（左白右黑/上白下黑）

最新推荐文章于 2023-06-02 15:41:27 发布
最新推荐文章于 2023-06-02 15:41:27 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： 无聊之作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/104187211
版权

起因：经常在一些APP、网站、公众号、海报等等途径看到两色组成（左右或上下）的一个字，希望自己去通过所学知识用CSS实现

（当然，一些CSS3特效网一堆源码，但是，为何不自己亲手尝试呢？这样不更容易加深对知识点的理解？是否和专业源码一样先不考虑，只要视觉上达到了，就成功了一步。）

例：句读app（还原仿写放在最下面，含源码）

在这里插入图片描述


一、刚开始我能想到的方法思路是： 分别做两个图层（两个同级元素），通过overflow（溢出隐藏）

  1. html部分，创建两个同级元素，内容要一样，不然怎么重叠，颜色不同就行了：List item
  2. 虽然定义 line-height 等于元素高来垂直居中，但是因为“字”有点长，下面一点就超出了元素底边，后面需要调整 line-height ：在这里插入图片描述
  3. 设置文字颜色：在这里插入图片描述
  4. 移位重叠（这里我用 margin-top，当然，absolute+top也是可以的，第二种方法我才用absolute）：
    （额之前加边是为了说明“字”即使设置了行高，也会超出底边，忘了去掉）在这里插入图片描述
    在这里插入图片描述
  5. 给处于最上层的元素 overflow，配合 width 来隐藏掉一部分：List item
  6. 由于文字小部分超出了元素的高（底边），所以line-height做了微调来移动文字在元素盒子内的垂直位置：在这里插入图片描述
  7. 移动整个部分到粉色盒子（box）的中间（把做好的一字两色用wrap包裹成一个整体，只需移动wrap）：在这里插入图片描述
  8. 父元素忘了给 overflow: hidden; 导致margin-top/bottom无效（带着整个父元素一起跑了）： 在这里插入图片描述
    在这里插入图片描述
  9. 最后去背景色完成（当然，我举例步骤说明才加的背景，实际不需要的）：List item
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css就不需要了，此处练习用不上*/

/*index.css*/
.box {
	width: 500px;
	height: 500px;
	margin: 200px;
	overflow: hidden;
	background: pink;
}

.wrap {
	width: 200px;
	height: 200px;
	margin: 150px auto;
}

.content {
	/*width: 200px;		这里就不定宽了，因为两者的宽都不同，在另一个类分别定义宽*/
	height: 200px;
	font-size: 200px;
	text-align: center;
	line-height: 185px;
}

.color-white {
	width: 200px;
	color: #fff;
}

.color-black {
	width: 100px;
	margin-top: -200px;
	color: #000;
	overflow: hidden;
}
</style>
</head>

<body>
	<div class="box">
		<div class="wrap">
			<div class="content color-white">字</div>
			<div class="content color-black">字</div>
		</div>
	</div>
</body>
</html>

二、后来我发现，overflow 缺乏灵活性，不能任意调整隐藏显示部分，于是我尝试了img的裁剪属性 clip 发现，可行且更灵活，你可以任意裁剪显示想要的部分


  1. 前面的步骤与上面是一样的：List item
  2. 将下方元素移动到上方，我这用position: absolute;，如果跟上面一样用margin-top也可以，看你喜欢：在这里插入图片描述
  3. 然后给最上层的元素，设置clip：（关于clip的用法，我会另外写一篇博客详细介绍）在这里插入图片描述
  4. 灵活的clip裁剪属性：在这里插入图片描述
    在这里插入图片描述
  5. 最后让该部分居中于粉色盒子（box）：在这里插入图片描述
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css不需要*/

/*index.css*/
.box {
	width: 500px;
	height: 500px;
	margin: 200px;
	overflow: hidden;
	background: pink;
}

.wrap {
	width: 200px;
	height: 200px;
	margin: 150px;
	position: relative;
}

.content {
	width: 200px;
	height: 200px;
	font-size: 200px;
	line-height: 180px;
}

.color-white {
	color: #fff;
}

.color-black {
	color: #000;
	clip: rect(0px, 100px, 200px, 0px);
	position: absolute;
	top: 0;
}
</style>
</head>

<body>
	<div class="box">
		<div class="wrap">
			<div class="content color-white">体</div>
			<div class="content color-black">体</div>
		</div>
	</div>
</body>
</html>

最后，来还原（仿）“句读”app的页面【未兼容】（用的是overflow:hidden;）

第一次练习：

在这里插入图片描述
源代码复制粘贴即可查看效果：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*--------------------------------------------------------------------*/

/*index.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	overflow: hidden;
	background: pink;
}

.main-container {}

.main-wrap {
	width: 476px;
	height: 802px;
	background: #fff;
	margin: 100px auto 0;
}

.main-container .date {
	width: 120px;
	font-size: 120px;
	line-height: 120px;
}

/*header*/
.main-container .main-header {
	height: 62px;
}

.main-header .string-logo {
	display: inline-block;		/*block会占行，把它行内化或者行内块级化*/
	font-size: 34px;
	line-height: 34px;
	padding-top: 12px;
	padding-left: 32px;
}

.main-header .list-button {
	float: right;
}

.main-header .list-button .list-button-item {
	float: left;
	width: 73px;
}

.main-header .list-button-item .item-link {
	display: inline-block;
	width: 30px;
	height: 30px;
	float: left;
	margin-top: 18px;
}

.main-header .list-button-item .item-num {
	font-size: 16px;
	color: #747474;
	float: left;
	margin-top: 12px;
	margin-left: 5px;
}

.main-header .list-button-item .item-comments {
	background: url("https://img-blog.csdnimg.cn/20200207204823196.png") no-repeat;
	background-size: 100%;
}

.main-header .list-button-item .item-like {
	background: url("https://img-blog.csdnimg.cn/20200207204830919.png") no-repeat;
	background-size: 100%;
}

.main-header .list-button-item .item-share {
	background: url("https://img-blog.csdnimg.cn/20200207204840140.png") no-repeat;
	background-size: 90%;
	margin-left: 13px;
}

/*banner*/
.main-container .main-banner {
	width: 476px;
	height: 318px;
	overflow: hidden;
	position: relative;
}

.main-banner .photo-txt {
	font-size: 16px;
	line-height: 30px;
	color: #fff;
	writing-mode: vertical-rl;	/*非IE浏览器可识别*/
	writing-mode: tb-rl;		/*IE浏览器只识别这条*/
	text-decoration: underline;
	letter-spacing: 5px;
	position: absolute;
	top: 30px;
	right: 20px;		/*这里需要考虑 line-height 带来的偏差*/
}

.main-banner .photo img{
	width: 476px;
	height: 318px;
}

.main-banner .color-white {
	color: #fff;
	margin-top: -80px;
	margin-left: 46px;
}

/*content*/
.main-container .main-content {
	width: 476px; 
	height: 422px;
	position: relative;
	overflow: hidden;
}

.main-content .color-black {
	color: #333;
	margin-top: -80px;
	margin-left: 46px;
}

.main-content .time {
	font-size: 15px;
	line-height: 15px;
	color: #747474;
	position: absolute;
	top: 14px;
	right: 32px;
}

.main-content .string-sentence {
	font-size: 24px;
	line-height: 38px;
	padding: 30px;
	margin-top: 146px;
}

.main-content .string-name {
	font-size: 24px;
	float: right;
	margin-right: 30px;
}
</style>
</head>

<body>
	<div class="bg">
		<div class="main-container">
			<div class="main-wrap">
				<div class="main-header clearfix">
					<p class="string-logo">句读</p>
					<ul class="list-button clearfix">
						<li class="list-button-item"><a class="item-link item-comments" href="#"></a><span class="item-num">300</span></li>
						<li class="list-button-item"><a class="item-link item-like" href="#"></a><span class="item-num">3.9K</span></li>
						<li class="list-button-item"><a class="item-link item-share" href="#"></a></li>
					</ul>
				</div>
				<div class="main-banner">
					<div class="photo-txt">
						<p>庚子鼠年</p>
						<p>戊寅月戊寅日</p>
						<p>正月十二</p>
					</div>
					<div class="photo">
						<img src="https://img-blog.csdnimg.cn/20200207204809238.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4OTYzMw==,size_16,color_FFFFFF,t_70" />
					</div>
					<div class="date color-white">05</div>
				</div>
				<div class="main-content clearfix">
					<div class="date color-black">05</div>
					<div class="time">2020.02 星期三</div>
					<p class="string-sentence">人间的事，只要生机不灭，即使遭到天灾人祸，暂被阻抑，终有抬头的日子。</p>
					<p class="string-name">丰子恺</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

第二次改进：（下划线用border，效果好多了）

在这里插入图片描述
源代码复制粘贴即可查看效果：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*--------------------------------------------------------------------*/

/*index.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	overflow: hidden;
	background: pink;
}

.main-container {}

.main-wrap {
	width: 476px;
	height: 802px;
	background: #fff;
	margin: 100px auto 0;
}

.main-container .date {
	width: 120px;
	font-size: 120px;
	line-height: 120px;
}

/*header*/
.main-container .main-header {
	height: 62px;
}

.main-header .string-logo {
	display: inline-block;		/*block会占行，把它行内化或者行内块级化*/
	font-size: 34px;
	line-height: 34px;
	padding-top: 12px;
	padding-left: 32px;
}

.main-header .list-button {
	float: right;
}

.main-header .list-button .list-button-item {
	float: left;
	width: 73px;
}

.main-header .list-button-item .item-link {
	display: inline-block;
	width: 30px;
	height: 30px;
	float: left;
	margin-top: 18px;
}

.main-header .list-button-item .item-num {
	font-size: 16px;
	color: #747474;
	float: left;
	margin-top: 12px;
	margin-left: 5px;
}

.main-header .list-button-item .item-comments {
	background: url("https://img-blog.csdnimg.cn/20200207204823196.png") no-repeat;
	background-size: 100%;
}

.main-header .list-button-item .item-like {
	background: url("https://img-blog.csdnimg.cn/20200207204830919.png") no-repeat;
	background-size: 100%;
}

.main-header .list-button-item .item-share {
	background: url("https://img-blog.csdnimg.cn/20200207204840140.png") no-repeat;
	background-size: 90%;
	margin-left: 13px;
}

/*banner*/
.main-container .main-banner {
	width: 476px;
	height: 318px;
	overflow: hidden;
	position: relative;
}

.main-banner .photo-txt {
	font-size: 16px;
	line-height: 16px;
	color: #fff;
	writing-mode: vertical-rl;	/*非IE浏览器可识别*/
	writing-mode: tb-rl;		/*IE浏览器只识别这条*/
	letter-spacing: 5px;
	position: absolute;
	top: 30px;
	right: 30px;	/*因为没有了行高line-height的影响，所以直接是30px*/
}

.main-banner .photo-txt .txt {
	display: inline-block;		/*行内块级化令它的padding填充有效，且边的长度跟随文字内容部分，没内容就没边*/
	border-left: 1px solid #fff;
	padding-left: 4px;
	margin-left: 10px;
}

.main-banner .photo img{
	width: 476px;
	height: 318px;
}

.main-banner .color-white {
	color: #fff;
	margin-top: -80px;
	margin-left: 46px;
}

/*content*/
.main-container .main-content {
	width: 476px; 
	height: 422px;
	position: relative;
	overflow: hidden;
}

.main-content .color-black {
	color: #333;
	margin-top: -80px;
	margin-left: 46px;
}

.main-content .time {
	font-size: 15px;
	line-height: 15px;
	color: #747474;
	position: absolute;
	top: 14px;
	right: 32px;
}

.main-content .string-sentence {
	font-size: 24px;
	line-height: 38px;
	padding: 30px;
	margin-top: 146px;
}

.main-content .string-name {
	font-size: 24px;
	float: right;
	margin-right: 30px;
}
</style>
</head>

<body>
	<div class="bg">
		<div class="main-container">
			<div class="main-wrap">
				<div class="main-header clearfix">
					<p class="string-logo">句读</p>
					<ul class="list-button clearfix">
						<li class="list-button-item"><a class="item-link item-comments" href="#"></a><span class="item-num">300</span></li>
						<li class="list-button-item"><a class="item-link item-like" href="#"></a><span class="item-num">3.9K</span></li>
						<li class="list-button-item"><a class="item-link item-share" href="#"></a></li>
					</ul>
				</div>
				<div class="main-banner">
					<div class="photo-txt">
						<span class="txt">庚子鼠年</span>
						<br />
						<span class="txt">戊寅月戊寅日</span>
						<br />
						<span class="txt">正月十二</span>
					</div>
					<div class="photo">
						<img src="https://img-blog.csdnimg.cn/20200207204809238.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4OTYzMw==,size_16,color_FFFFFF,t_70" />
					</div>
					<div class="date color-white">05</div>
				</div>
				<div class="main-content clearfix">
					<div class="date color-black">05</div>
					<div class="time">2020.02 星期三</div>
					<p class="string-sentence">人间的事，只要生机不灭，即使遭到天灾人祸，暂被阻抑，终有抬头的日子。</p>
					<p class="string-name">丰子恺</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

【素材图片我放上来吧】
在这里插入图片描述https://img-blog.csdnimg.cn/20200207204809238.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4OTYzMw==,size_16,color_FFFFFF,t_70
在这里插入图片描述https://img-blog.csdnimg.cn/20200207204823196.png
在这里插入图片描述https://img-blog.csdnimg.cn/20200207204830919.png
在这里插入图片描述https://img-blog.csdnimg.cn/20200207204840140.png

iuukai
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈css中的clip裁剪用法
09-24
下面小编就为大家带来一篇浅谈css中的clip裁剪用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div里两种颜色 css,div css颜色
weixin_29149931的博客
08-04 670
cssbody{padding: 0;margin: 0;background:#232323;}.box{position: relative;margin: auto;display: block;margin-top: 8%;width: 600px;height: 420px;background: none;}.part-1, .part-2, .part-3, .part-4, .pa...
html div怎么两个颜色,javascript – 当另一个焦点在焦点上时,如何更改css中div的颜色...
weixin_42509868的博客
06-16 258
您可以通过更改html标记来执行此操作,如下所示.您的选择器#in：focus#input1 {将不起作用,因为将选择下一个兄弟.#in：focus#input1将选择#in元素旁边的#input1元素.body {color: red;}#in:focus + #input1 {color: blue;}input1:由于CSS中没有先前的兄弟选择器,您必须使用Javascript.香草JS：v...
css两种渐变色
INTJ
07-04 521
渐变色
怎么样html的边框变色,CSS 实现彩色边框效果
weixin_32620249的博客
06-22 536
CSS3新增了box-shadow，用于设置盒子的阴影，今天玩了一下！纯CSS实现的彩色边框效果。效果展示：完整代码如下：Documentdiv.one div {width: 100px;height: 100px;margin: 50px auto;background-color: rgb(245, 234, 234);box-shadow:10px 0 15px -2px rgb(11, ...
【代码实现--图片放大、缩小、旋转、拖拽】
github_39096247的博客
04-23 653
vue【代码实现--图片放大、缩小、旋转、拖拽】
CSS的overflow属性及清除浮动
拾忆楓灵的博客
04-13 3360
Overflow 值:          visible | hidden | scroll | auto | inherit 初始值：visible 应用于：块级元素和替换元素 继承性：无 计算值：根据指定确定 visible 元素的内容在元素框之外也可见，内容超出元素框时不会改变元素框的形状。 scroll 元素的内容会在元素框的边界处裁剪，溢出的内容将看不见，但是浏览器
img父级 overflow失效的问题
weixin_44805839的博客
06-30 385
img父级 overflow失效的问题
CSS中的text-overflow:clip|ellipsis的使用
liudanyang_21的博客
07-22 1529
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...,可以使用text-overflow:clip|ellipsis 基本语法：text-overflow : clip | ellipsis 若为text-overflow:clip 取默认值，不显示省略标记(...)，而是简单的裁切 若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) 例如： ...
背景剪切 html,用CSS3 background-clip裁剪背景
weixin_39671935的博客
06-27 506
用CSS3 background-clip裁剪背景，这个方法应用很多。* 用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的地方开始渲染，IE的默认表现也等同于border-box背景裁剪(背景从border(即包括border在内)开始绘制(渲染))：#background-clip-...
嵌入式系统/ARM技术中的嵌入式实时操作系统的可裁剪性及其实现
11-12
由于宿主对象的多样性，为适应不同的要求，无论在硬件方面还是在软件方面，嵌入式系统必须具有很强的可裁剪性，并且便于修改。 　所谓操作系统的可裁剪性，就是一个规模大且功能齐全的操作系统，在结构上保证了用户...
CSS中的clip-path区域裁剪属性使用教程
12-13
CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。 CSS Code复制内容到剪贴板 .clip-me {  /* 已被标志为不推荐使用的写法 */  position: absolute; /* 需要 absolute 和...
通信与网络中的基于S3C44BOX用中断方式在μC/OS-Ⅱ上实现多任务通信
12-05
摘要:本文简要介绍了SAMSUNG公司的嵌入式芯片S3C44BOX、源代码公开的嵌入式实时操作系统μC/OS_Ⅱ及其在S3C44BOX上移植的有关问题,详细讲述了基于S3C44BOX用中断方式实现多任务通信的软硬件设计。选用的开发平台是...
嵌入式系统/ARM技术中的ARM在嵌入式linux内核裁剪与移植的应用
10-22
微处理器与传统的中央处理器相比，具有体积小，重量轻和容易模块化等优点。微处理器的基本组成部分有：寄存器堆、运算器、时序控制电路，以及数据和地址总线。微处理器能完成取指令、执行指令，以及与外界存储器和...
背景全屏，左右两边颜色不一样，DIV+CSS 布局
热门推荐
37度2
02-13 1万+
html { overflow-x:hidden;} body{ margin:0; padding:0;} #top{ width:100%; position:relative; height:50px;} #content{ width:980px; margin:0 auto; background:#999; height:500px; z-index:999; po
接口获取新闻数据渲染而且在返回的html中的每个div的a标签中拼接一段字符串进行记述。
fury的博客
06-02 222
这样就是完整的渲染了返回的html和样式。
CSS学习笔记
YuKing_HONG的博客
10-17 1271
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
用CSS解决hover一个div，改变另外2个div的样式
阿牛哥的博客
10-14 4608
用CSS解决hover一个div，改变另外2个div的样式 在项目中遇到这样一个问题： div1和div3有默认的css样式 背景颜色是绿色 div2有一个默认的css样式 背景颜色是红色 需求：当鼠标悬浮在div1，div2，div3上时 让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时 让其展示默认效果 <style> .div1 { width: 100px; height: 100px;
（css）把一个div变成圆左边蓝色 右边绿色
weixin_43844696的博客
07-03 841
效果图如下： <div></div> div { width: 300px; height: 300px; /* background:linear-gradient(to right,blue 50%, green 50%); 第一种 利用CSS3渐变*/ border-radius: 150px; transit...
css实现单行/多行的超出文本的裁剪、省略号
最新发布
06-03
CSS提供了三种方式实现单行/多行的超出文本的裁剪、省略号。 1. 单行超出文本的裁剪、省略号 ``` /* 单行文本超出省略号 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` 2. 多行超出文本的裁剪、省略号（WebKit内核浏览器） ``` /* 多行文本超出省略号（WebKit内核浏览器）*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; ``` 3. 多行超出文本的裁剪、省略号（非WebKit内核浏览器） ``` /* 多行文本超出省略号（非WebKit内核浏览器）*/ display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -moz-box-lines: 2; box-lines: 2; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值