CSS5 | CSS滑动门左扇与右扇图片重叠问题解决

本文中所使用的滑动门背景图片是自己用微软相册手工切的,没用ps,所以凑乎看吧

首先放出一张目标效果也是最终完成图

下面说问题

CSS推拉门原理

按原理来说,就是两个行内块前后站一行,然后前面的a标签和span标签分别是推拉门素材的左扇部分和右扇部分,然后跟随span的文字内容长度自动加长span背景,看起来就像是在加长,实则只是多放出隐藏的素材图片的剩余部分。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>* {margin: 0;padding: 0;}a {margin: 100px;height: 49px;display: inline-block;background-color: pink;padding-left: 15px;}a span {height: 49px;display: inline-block;background-color: purple;padding-right: 15px;}</style>
</head>
<body>
<a href="#"><span></span></a>
</body>
</html>

然后实际操作的时候问题就出在素材图片上了,我一开始使用的是没有白色背景的纯png抠图图标

yuanjiao-bgimg.png

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css滑动门原理</title><style>* {margin: 0;padding: 0;}a {margin: 100px;height: 133px;display: inline-block;/*千万不能写死宽度,我们要推拉门*/background: url("../../img/yuanjiao-bgimg.png") no-repeat;/*background: pink no-repeat;*/padding-left: 35px;}a span {height: 133px;display: inline-block;background: url("../../img/yuanjiao-bgimg.png") no-repeat;/*background: purple no-repeat;*/padding-right: 55px;}</style>
</head>
<body>
<a href="#"><span></span>
</a>
</body>
</html>

出来的效果就是这样的

这样就出现素材图片重叠的问题

即使我们将span的素材图片定位到右侧

a span {height: 133px;display: inline-block;background: url("../../img/yuanjiao-bgimg.png") no-repeat right;/*background: purple no-repeat;*/padding-right: 55px;}

也是会多出a标签的右侧角出来的

 

针对这个问题有两种方法

1.给素材图片加上与背景一样的颜色,从素材图片上入手

new-yuanjiao-bgimg.png

这个是修改后的图

从黑色背景上可以看出与原图的区别

因为我们演示背景是纯白的,所以我们图片的边缘背景也是rgb(225,225,225) -> white

重新修改代码

a {margin: 100px;height: 133px;display: inline-block;/*千万不能写死宽度,我们要推拉门*/background: url("../../img/new-yuanjiao-bgimg.png") no-repeat;padding-left: 35px;
}a span {height: 133px;display: inline-block;background: url("../../img/new-yuanjiao-bgimg.png") no-repeat;padding-right: 55px;
}

这样就是想要的效果了

再把右扇的素材图片定位一下右边,再完善一下代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css滑动门原理</title><style>* {margin: 0;padding: 0;}a {margin: 100px;height: 133px;display: inline-block;/*千万不能写死宽度,我们要推拉门*/background: url("../../img/new-yuanjiao-bgimg.png") no-repeat;padding-left: 65px;text-decoration: none;line-height: 133px;color: white;}a span {height: 132px;display: inline-block;background: url("../../img/new-yuanjiao-bgimg.png") no-repeat right;padding-right: 65px;}</style>
</head>
<body>
<a href="#"><span>CSS滑动门</span>
</a>
</body>
</html>

刷新浏览器,得到想要的效果 

但实际上培训机构的这种做法其实普适性并不强,我要是改了背景颜色我还要改素材图的背景颜色,岂不是很麻烦,所以我想到第二种方案

2.使用原先的png抠图素材,配合border-radius直接把a标签的右边两个多余的角切掉

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>* {margin: 0;padding: 0;}a {margin: 100px;height: 133px;display: inline-block;/*千万不能写死宽度,我们要推拉门*/background: url("../../img/yuanjiao-bgimg.png") no-repeat;padding-left: 65px;text-decoration: none;line-height: 133px;color: white;border-radius: 0 50% 50% 0; /*给a标签的右上和右下两个角直接切角*/}a span {height: 133px;display: inline-block;background: url("../../img/yuanjiao-bgimg.png") no-repeat right;padding-right: 65px;}</style>
</head>
<body>
<a href="#"><span>CSS滑动门</span>
</a>
</body>
</html>

也可以得到同样的效果 

 

 

随着span内的文字增加也会自适应背景图,教程的素材图片左扇其实可以再把padding-left的像素多给一些就会让图片的过渡更自然一些

所以,在选取或者制作css推拉门按钮的素材图片时也尽可能少的做颜色过渡,这样会使得整体性不好

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

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

相关文章

TCP 三次握手:四次挥手

TCP 三次握手/四次挥手 TCP 在传输之前会进行三次沟通&#xff0c;一般称为“三次握手”&#xff0c;传完数据断开的时候要进行四次沟通&#xff0c;一般称为“四次挥手”。 数据包说明 源端口号&#xff08; 16 位&#xff09;&#xff1a;它&#xff08;连同源主机 IP 地址…

验证码服务使用指南

验证码服务使用指南 1 部署验证码服务 1.1 基础环境 Java 1.8 Maven3.3.9 1.2 安装Redis 参考“Redis安装指南” 1.3 部署验证码服务 1.3.1 下载源码 使用git从远程下载验证码服务代码(开源)。 1.3.2 使用idea打开项目 使用idea打开上一步下载的sailing目录&#xf…

优维产品最佳实践第20期:控制台全链路监控

之前我们会觉得cmdb自动发现没有上报很难排查&#xff0c;弄不清楚数据的上报链路&#xff1b;监控指标的数据断点很难定位&#xff0c;flink对现场来说是一个黑盒子&#xff1b;apm数据更新不及时到底是上报异常还是入库失败呢&#xff1f; 现在控制台集成了对数据链路的监控…

超声系统前端理论与模拟仿真-续

作者&#xff1a;蒋志强 本人同意他人对我的文章引用&#xff0c;但请在引用时注明出处&#xff0c;谢谢&#xff0e;作者&#xff1a;蒋志强 前言 近期整理了一下彩超前端及波束合成相关的内容&#xff0c;很早以前已经有过一次&#xff0c;这次把其它的内容总结一下&#xf…

【数据结构】什么是二叉树?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;二叉树的定义 &#x1f4cc;二叉树的特点 &#x1f4cc;特殊二叉树 &#x1f4cc;二叉树的性质 &#x1f4cc;二叉树的存储结构 &#x1f4cc;二叉树…

【Vue3+TypeScript】快速上手_代码

目录 001_写一个APP组件 002_一个简单的效果 003_setup概述 004_setup的返回值 005_setup与Options API的关系 006_setup语法糖 007_ref创建_基本类型的响应式数据 008_reactive创建_对象类型的响应式数据 009_ref创建_对象类型的响应式数据 010_ref对比reactive 01…

(2023|CVPR,Corgi,偏移扩散,参数高斯分布,弥合差距)用于文本到图像生成的偏移扩散

Shifted Diffusion for Text-to-image Generation 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要 1. 简介 2. 方法 2.1 偏移扩散 3. 实验 3.1 无监督文本到图像生成 3.2 无…

三相电机转差率为负值的情形

1.电机开始发电的特征 注意&#xff0c;电机因为有输入频率对原始旋转磁场的影响&#xff0c;在正常工作时&#xff0c;应该处于稳态&#xff0c;因为旋转磁场决定了这个系统的运转方向和运转的大致频率区间。它会处于力矩平衡态。但是&#xff0c;如果&#xff0c;此时电机处…

网络安全保障领域

计算机与信息系统安全---最主要领域 云计算安全 IaaS、PasS、SaaS(裸机&#xff0c;装好软件的电脑&#xff0c;装好应用的电脑) 存在风险&#xff1a;开源工具、优先访问权、管理权限、数据处、数据隔离、数据恢复、调查支持、长期发展风险 云计算安全关键技术&#xff1a;可信…

Vue-Pinina基本教程

前言 官网地址&#xff1a;Pinia | The intuitive store for Vue.js (vuejs.org) 看以下内容&#xff0c;需要有vuex的基础&#xff0c;下面很多概念会直接省略&#xff0c;比如state、actions、getters用处含义等 1、什么是Pinina Pinia 是 Vue 的存储库&#xff0c;它允许您跨…

〖Python网络爬虫实战㊹〗- JavaScript Hook 的用法

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…

buuctf-Misc 题目解答分解97-99

97.[BSidesSF2019]zippy 下载完就是一个流量包 追踪tcp nc -l -p 4445 > flag.zip unzip -P supercomplexpassword flag.zip Archive: flag.zip 压缩包密码 supercomplexpassword 保存为 flag.zip 解压得到flag 98.[GUET-CTF2019]虚假的压缩包 先从虚假的压缩包入手 &am…

MySQL的事务-隔离级别

上篇&#xff0c;整理了MySQL事务的原子性&#xff0c;这篇继续整理MySQL事务的一致性、隔离性和持久性。 2. 一致性指的是事务开始前和结束后&#xff0c;数据库的完整性约束没有被破坏&#xff0c;这保证了数据的完整性和一致性。一致性必须确保数据库从一个一致的状态转换到…

C++ 比 C语言的新增的特性 1

1. C是C的增强 1.1 C是静态类型的语言&#xff0c;具有严格的数据类型检查 1.1.1 c 因为const修饰的变量不允许修改&#xff0c;但是只给了警告&#xff0c;不严谨 const int a10;a20; //报错int *p&a;*p20;//a的值&#xff1f; test1.c:6:9: warning: initialization dis…

详解Java反射机制reflect(一学就会,通俗易懂)

1.定义 #2. 获取Class对象的三种方式 sout(c1)结果为class com.itheima.d2_reflect.TestClass 获取到了Class对象就相当于获取到了该类 2.获取类的构造器 3.获取全部构造器对象 2.根据参数类型获取构造器对象 类型后必须加.class 3.构造器对象调用构造器方法 4.暴力访问 4.获…

【笔记】入门PCB设计(全30集带目录) 杜洋工作室 AD09 Altium Designer

入门PCB设计&#xff08;全30集带目录&#xff09; 杜洋工作室 AD09 p1 创建p2 原理图上增加元件1&#xff09;加元件2&#xff09;放导线3&#xff09;自定义元件1. 自定义排针2.有引脚的元件 p3 完整原理图 p1 创建 step1.创建&#xff08;PCB&#xff09;工程,后缀.PrjPCB。…

【FPGA 器件比较】Altera -- Xilinx

比较以下市场前二名的产品线及定位 应用场景XilinxAltera高性能VersalAgilex F/I性能Virtex / Kintex / Artix / Zynq UltraScaleAgilex F/I / Stratix 10中档Virtex / Kintex / Zynq ~ 7 / UltraScaleStratix 10 / Arria 10低成本Artix-7 Sparton-7Cyclone 10 如上表&#x…

Linux构建NFS远程共享存储和ftp配置

NFS架构 NFS介绍 文件系统级别共享&#xff08;是NAS存储&#xff09; --------- 已经做好了格式化&#xff0c;可以直接用。 速度慢比如&#xff1a;nfs&#xff0c;samba NFS&#xff1a;Network File System 网络文件系统&#xff0c;NFS 和其他文件系统一样,是在 Linux …

《Git快速入门》Git分支

1.master、origin、origin/master 区别 首先搞懂git分支的一些名称区别&#xff1a; master &#xff1a; Git 的默认分支名字。它并不是一个特殊分支、跟其它分支完全没有区别。 之所以几乎每一个仓库都有 master 分支&#xff0c;是因为 git init 命令默认创建它&#xff0c…

Redis缓存穿透、缓存击穿、缓存雪崩介绍

一、Redis的缓存穿透 1.什么是缓存穿透&#xff1f; 缓存穿透是指&#xff1a;客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这时缓存就永远不会生效&#xff0c;这些请求都打到数据库从而导致数据库压力过大。 2.出现缓存穿透的解决方案&#xff0c;以下是常用的两…