如何设置让背景颜色不包括 padding 部分,顺带全面学习 background-clip 属性(可以实现文字渐变)

本文主要是介绍如何设置让背景颜色不包括 padding 部分,顺带全面学习 background-clip 属性(可以实现文字渐变),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先解决需求

实现背景颜色不包括 padding 部分,直接给容器添加 css 属性:background-clip:content-box;
示例代码:

.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;
}

学习背景

我主要是在布局网页的时候使用 flex 布局,对三列子元素设置 flex:1 进行平分,但是如果给其中两个子元素加上 margin-right 的话就会发现子元素会连同 margin-right 的值一起撑开,实际内容(不包括 margin 的部分)并不会三等分宽度。

所以我就想着使用 padding 来代替 margin,因为默认情况下 padding 会计入元素的总宽度和高度计算中,而 margin 并不会。父元素的背景会作用在子元素的 margin 区域,所以就想着如果背景不包括 padding 部分,那么就可以解决这个问题。

接下来我们系统学习一下 background-clip 属性。

ps:其实这个三等分效果也可以使用 grid 布局结合 gap 来实现,更加方便,但是 grid 布局浏览器支持性没有 flex 广,兼容性不如 flex,而且这篇文章主要是为了介绍 background-clip 属性,有兴趣的朋友可以自己使用 grid 布局实现一下这个效果。

关于 background-clip

文章最后有所有background-clip 属性的实战效果图和源码。

基础介绍

单词 background-clip 的字面意思就是背景裁剪,表示让背景作用于容器的哪个区域。最常用的有三个值: background-clip:content-box
background-clip:padding-box
background-clip:border-box。默认情况下根据浏览器的默认的盒子模型,background-clip 的默认值是background-clip:padding-box就是说背景生效的范围包括 padding 和 content。

浏览器的盒子模型,注意并没有 margin-box 这一说法
在这里插入图片描述

属性值

background-clip:content-box

这个值指定背景只在内容区域绘制,不包括内边距(padding)和边框(border)。这意味着背景颜色或图像不会延伸到内边距中。

.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;
}

此例中,元素的背景色只填充内容区域,内边距显示的是元素所在父级的背景色或透明。

background-clip:padding-box

这是默认值,表明背景会延伸到内边距但不包括边框。即背景同时应用于内容和内边距区域。

示例:

.padding-box-example {background-color: lightgreen;padding: 20px;border: 1px solid black;
}
/* 默认行为,显式声明可增强代码可读性 */
.padding-box-example {background-clip: padding-box;
}

这里,背景颜色会填满内容和内边距区域,边框外则无背景。

background-clip:border-box

背景不仅覆盖内容和内边距区域,还会延伸到边框的下层。这是说,边框之下会有背景,但边框本身不会被背景色覆盖。

示例:

.border-box-example {background-color: lightyellow;padding: 20px;border: 1px solid black;background-clip: border-box;
}

背景颜色会扩展到整个元素,包括边框下方,但边框线自身颜色不变。

background-clip:inherit

使元素继承其父元素的 background-clip 值。

示例:

.parent {background-clip: padding-box;
}.child {background-clip: inherit;
}

子元素将采用与父元素相同的背景裁剪方式。

background-clip:initial

将 background-clip 属性设置为其初始值,即 padding-box。

示例:

.initial-clip-example {background-clip: initial; /* 等同于 padding-box */
}

这将重置任何先前设置,使背景裁剪回到默认行为。

background-clip:unset

将 background-clip 的计算值设置为其父元素的值,如果父元素没有设置,则回退到初始值(padding-box)。

示例:

.unset-clip-example {background-clip: unset;
}

如果父元素有设置 background-clip,则继承该值;否则,使用默认值。

background-clip:text

允许背景应用到文本上而不是元素的背景区域,常用于实现文本渐变色等效果。

示例:

.text-clip-example {background-image: linear-gradient(to right, red, orange);-webkit-background-clip: text;color: transparent;
}

注意,-webkit-background-clip: text; 是为了兼容性,因为并非所有浏览器都支持将背景裁剪到文本上。

总结

本文章通过一个需求来引申出一个让背景不包括 padding 的功能,进而系统学习背景裁剪属性 background-clip。包含丰富的讲解和实战示例。有收获的话可以点个赞哟!欢迎留言交流。

效果和源码

效果图
在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>html, body {margin: 0;padding: 0;height: 100vh;}.container {width: 400px;display: flex;flex-wrap: wrap;background-color: antiquewhite;/* background-clip: content-box; */}.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;}.padding-box-example {background-color: lightgreen;padding: 20px;border: 1px solid black;/* 默认行为,显式声明可增强代码可读性 */background-clip: padding-box;}.border-box-example {background-color: blue;padding: 20px;/* border包含blue,可以把0.3改成0看效果 */border: 5px solid rgba(255, 0, 0, 0.3);background-clip: border-box;}.inherit-clip-example {.parent {background-clip: border-box;border: 2px solid black;padding: 5px;/*  */background-color: blueviolet;}.child {background-clip: inherit;border: 2px solid black;padding: 5px;background-color: yellowgreen;}}.initial-clip-example {background-color: aquamarine;background-clip: content-box;/* padding是container的背景色 */padding: 5px;border: 2px solid black;.child {background-clip: initial; /* 等同于 padding-box */background-color: blueviolet;/* padding是自己的背景色 */padding: 5px;}}.unset-clip-example {/* container没有设置background-clip */background-clip: unset;/* padding是自己的背景色 */padding: 20px;background-color: red;}.text-clip-example {width: 100px;background-image: linear-gradient(to right, red, orange);-webkit-background-clip: text;color: transparent;font-size: 20px;}</style><body><div class="container"><div class="content-box-example">content-box</div><div class="padding-box-example">padding-box</div><div class="border-box-example">border-box</div><div class="inherit-clip-example"><div class="parent"><div class="child">inherit-clip</div></div></div><div class="initial-clip-example"><div class="child">initial-clip</div></div><div class="unset-clip-example">unset-clip</div><div class="text-clip-example">文字渐变</div></div></body>
</html>

这篇关于如何设置让背景颜色不包括 padding 部分,顺带全面学习 background-clip 属性(可以实现文字渐变)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026597

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo