div背景透明_为什么css3实现background-image和半透明边框这么麻烦

”background和border属性能有什么难的?"

我经常听到新手觉得css的background和border属性简单。

那好,我们来看下面这个比较“简单”的需求:

父元素有一张背景,子元素有边框,且子元素有一张背景颜色。这时候子元素的背景会呈现出什么样子?

来,我们来看代码html结构

<

然后,我们再看css的结构:

.

我准备了一张图,作为父元素的背景图

出于私心,我准备的是我女神鞠婧祎的配图

145ea2bfcaebf1fbe8376d54298b3043.png
可可爱爱,还有脑袋

好,接下来看看效果

2a65dde5ea71021daf6c8c8c0c5dac24.png

从这张图我们可以看到,小鞠的图片只占据了div的content部分,也就是我红色框内的部分。

如果我们了解标准盒模型的话,我们知道,一个标准盒模型如下:

div = margin+border+padding+content

backgroud-image默认是从content区域的左上角开始渲染。

到这里就有前端说:“这我知道啊,这有啥好难的吗?”

好,接下来才是正题。

现在我改变需求,我要求这样:

现在我们要求父元素有一个背景图,子元素边框为半透明

现在,我们开始来写cssl结构

.child{border:30px solid #fff;max-width: 1000px;max-height:600px;border-color:rgba(0,0,0,0.5);
}
.father{background-image: url("./jjy.jpg");
}
//或者我们用高端一点的写法吧,色相的hsla函数
.child{border-color:hsla(0,100%,50%,50%)
}
四个参数分别是:
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。

我们来看效果

e39168bf75e26ee8840b26b422010e27.png

父元素的div会透过子元素的半透明的边框,理论上讲,父元素的background-image是在子元素的下一层,而我们的理想效果是父元素的背景图不透上来,且保持子元素的边框呈现出半透明的状态

这就是background属性的工作原理,好,现在我们来恢复到一个比较简单的模型下:

<div>
</div>css部分
div{background-image: url("./jjy.jpg");background-clip:border-box; //默认值border:30px solid white;border-color:hsla(0,100%,50%,50%);background-clip: padding-box;background-repeat: no-repeat;background-size: 100% 100%;
}

在 background-clip的默认值下,border-box是默认从边框的边缘开始裁剪的,这样也就导致了background会入侵标准盒模型的border区域,

我们可以通过 background-clip属性,来重新定义background-image从标准盒模型的哪个位置开始裁剪。

取值分别是:

content-box //从content区域开始裁剪

padding-box //从padding区域开始裁剪

border-box //从border区域开始裁剪

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ntr模式_ntr什么意思?

NTR全称New Type destroyeR system&#xff0c;即新人类毁灭系统&#xff0c;为《高达UC》中「UC」计划核心的RX-0系列机体所搭载的特殊OS系统。该系统可以对敌性精神感应MS所散发出的感应波进行探知&#xff0c;从而激发机体的形态变化&#xff0c;进入「毁灭模式」&#xff0…

python hashlib_python hashlib模块及md5() 、sha()

hashlib模块是python2.5 以后出现的一个包&#xff0c;其主要涉及安全和加密。而且hashlib 得到openssl 的“支持” &#xff0c;其支持openssl 库提供的所有算法&#xff0c;具体包括md5、sha1、sha224、sha256、sha512等。详细用法&#xff0c;可以通过pydoc hashlib 查看&am…

c mysql 查询超时设置_MySQL查询超时的设置方法

欢迎进入Linux社区论坛&#xff0c;与200万技术人员互动交流 >>进入 这里顺带解释一下什么是non-interactive connection Non-Interactive Commands Just do a quick look up on a table without logging into the client, running the query then logging back out aga欢…

python聚类分析案例_深度解读|如何构建用户分级体系实现精细化运营?附案例实操...

本文内容较长&#xff0c;代码全部已展示在文中用户精细化分类也可以称做用户画像&#xff0c;是目前很常见的一种运营手段&#xff0c;目的是为了更好的服务不同性质的客户&#xff0c;提高每个环节的转化率&#xff0c;最大程度挖掘客户价值&#xff0c;创造利润。那么如何构…

mysql 查询语句 过滤_MySQL全面瓦解7:查询的过滤条件

概述在实际的业务场景应用中&#xff0c;我们经常要根据业务条件获取并筛选出我们的目标数据。这个过程我们称之为数据查询的过滤。而过滤过程使用的各种条件(比如日期时间、用户、状态)是我们获取精准数据的必要步骤&#xff0c;这样才能得到我们期望的结果。所以本章我们来学…

单片机集成wifi等_从零制作单片机需要哪些知识?

请点击上面 免费关注...说一下从芯片制作开始到最后编写驱动程序整个过程中每一步所需要的知识。作者&#xff1a;彭谟威链接&#xff1a;https://www.zhihu.com/question/28580074/answer/93515413来来来&#xff0c;让我们一起&#xff0c;左手右手一个慢动作。每一个方向都值…

matlab案例_基于matlab和frost平台的cassie案例足式机器人运动学和动力学计算实现过程...

1、软件平台Maltab2019aMathematica 12.1.0Frost2、实现步骤&#xff08;1&#xff09;、安装matlab2019a&#xff08;2&#xff09;、安装Mathematica 12.1.0&#xff08;3&#xff09;、下载frost-dev-master软件说明&#xff1a;https://ayonga.github.io/frost-dev/pages/i…

计算机毕业设计----SSM实现的一个在线文具学习用品购买商城

项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员信息管理,查看用户信息,新闻公告信息管理,文具类型信息管理,城市信息管理,配货点信息管理,文具信息管理,订单信息…

python2和3语法区别_python2和3语法区别

以下是Python2和Python3中的一些语法差异&#xff0c;有需要的小伙伴可以学习下。 print语句 在Python 2里&#xff0c;print是一个语句。无论你想输出什么&#xff0c;只要将它们放在print关键字后边就可以。在Python 3里&#xff0c;print()是一个函数。就像其他的函数一样&a…

mysql 5.7 数据库备份_mysql 5.7 数据库备份

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

python如何循环使用input_python基础知识input到while循环

j周笔记 输入与输出 1.输入 input (请输入内容) 字符串 2.输出 print(输出到控制台) 变量vairable 变量就是相当于我们人的名字 1.名字 2.存储位置 3.该存储位置的内容解释 ​ name(名字) 张三(值(存储位置)) 变量名 值 注意: 给变量取名字时,一定要遵循python语法规范 1.变量…

MySQL的teaching表建立_MySQL-一- 创建数据表

问题一&#xff1a;如何验证MySQL数据库安装成功&#xff1f;问题二&#xff1a;如何用客户端navicat连接到MySQL数据库&#xff1f;练习&#xff1a;创建学校数据库的表2.创建数据库2.1 创建学生表student2.2创建成绩表score2.3创建课程表course2.4创建教师表 teacher注&#…

echarts tooltip被遮挡_echarts 的tooltip定位到当前图,避免溢出和遮挡

问题&#xff1a;tooltip初始是跟着鼠标移动&#xff0c;当内容过多&#xff08;宽度高度过大&#xff09;&#xff0c;会被其他遮挡或者会溢出屏幕外解决&#xff1a;思路&#xff1a;根据官方文档&#xff0c;鼠标在左侧时&#xff0c;tip在右侧&#xff0c;鼠标在右侧时&…

16比9尺寸是多少厘米_16比9(16比9分辨率大全)

原式=2/9(1-7/16)=2/9*9/16=1/8,提公因式,因为后面分子上出现9,可以约掉 16比9计算公式是:16=2*2*2*29=3*3 因为没有公因数,互质,所以16比9就是最简比形式。求比值,可以是整数,小数,分数。比值,即两数相比所得的值。扩展资料 a、. 1280*768与1280*960即不是16:9也不是…

idea mysql错误提示_idea提示错误:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

碰见了一个问题&#xff0c;一直无法解决&#xff0c;希望大家帮帮忙。这是连接mysql的JdbcUtils代码&#xff1a;public class JdbcUtils {// 配置文件private static Properties props null;// 静态块保证只加载一次static {InputStream in JdbcUtils.class.getClassLoader…

python中seed的用法_Python中的seed()方法怎么用

Python中的seed()方法怎么用?下面是seed()方法的相关介绍&#xff1a; 描述 seed() 方法改变随机数生成器的种子&#xff0c;可以在调用其他随机模块函数之前调用此函数。 语法 以下是 seed() 方法的语法&#xff1a;import random random.seed ( [x] ) 注意&#xff1a;seed(…

mysql 数据库访问层_MYSQL数据库访问层

/*** 数据访问层&#xff0c;仅处理MYSQL* 包括* by:李勇* at:2009-01-19*/final classDalSplite{public function__construct(PDO $pdo){}}/*** 指定库中的指定表的访问类**/final classDalTable{private$pdo;private$tableName;private$meta;private$primaryKey;/*** 构造方法…

bootstrap 输入错误提示_win7系统提示explorer.exe应用程序错误怎么办

在电脑当中弹出错误提示框可谓是多种多样&#xff0c;详细有很多电脑都有碰到过&#xff0c;最近有位win7系统用户在使用电脑的过程中&#xff0c;系统总是提示“explorer.exe应用程序错误”&#xff0c;用户不知道怎么解决这个问题&#xff0c;为此非常苦恼&#xff0c;那么wi…

mysql 分页效率_MYSql分页查询效率提高

CREATE TABLE goods (UrlId char(100) CHARACTER SET utf8 NOT NULL,Title varchar(100) CHARACTER SET utf8 DEFAULT NULL,CreateTime char(30) CHARACTER SET utf8 DEFAULT NULL,PRIMARY KEY (UrlId))上面是本人表格的结构&#xff0c;本人的程序是用来做搜索引擎的&#xff…

json阅读器_Flutter小说阅读器系列一:使用Bloc模式获取起点小说关键字提示

Bloc模式下的小说关键字提示效果图最近难得有些闲暇时间&#xff0c;所以我又打算做一个小说阅读器&#xff0c;以前倒是用RNGolang写了一个&#xff0c;不过当时太过放飞自我导致自己看起来都很费力&#xff0c;这次我准备换成Flutter试一下。先简单将小说阅读器分为以下几个部…