background背景和border颜色，以及background-clip属性，透明度问题探讨

最新推荐文章于 2023-06-04 01:55:08 发布
最新推荐文章于 2023-06-04 01:55:08 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： css细节积累
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38992657/article/details/88693085
版权

在这里插入图片描述
在这里插入图片描述
这种情况是绿色背景色没有被透上来

在这里插入图片描述

在这里插入图片描述

将小方块背景色改为红色，白色透明边框变成了红色透明边框，

综上两点，说明透明边框的颜色随着背景色而变化。注意是透明边框！

那么如何将绿色背景在透明边框中透明上来呢，，

用到css3的一个属性，，background-clip: border-box ,padding-box

border-box表示在border，padding，width中将绿色背景裁掉

padding-box表示在padding,width 中将绿色背景裁掉

实例如下：
在这里插入图片描述

将上述加上此属性，则
在这里插入图片描述

绿色背景通过透明边框透明出来！

有疑问一起探讨学习呀，前端酱油芝士一枚！

brace-orange
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS控制边框和背景
在到处之间找我
03-05 666
定义简单边框border属性（简写属性）元素的边框（border）是围绕元素内容和内边距的一条或多条线CSS border属性允许我们规定元素边框的样式、宽度和颜色。定义和用法border简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：• border-width• border-style• border-color如果不设置其中的某个值，也不会出问题，比如border: soli...
CSS —— background 背景
藜笙的博客
02-28 824
<!--背景：背景支持为元素添加背景颜色和背景图片，接下里介绍背景相关的属性。 ①background-color:背景颜色。 CSS代码 ： <style> #box{ width:200px; height: 200px; background-color:red; } ...
不要图片？CSS实现圆角边框渐变色+背景透明
苏苏就是小苏苏的博客
06-04 8397
👏不要图片？CSS实现圆角边框渐变色+背景透明，最近在工作中常常实现这些效果，速速来Get吧~🥇文末分享源代码。苏苏的bug。
CSS技巧（一）：背景与边框
qq_30325409的博客
03-29 1108
背景与边框 1.半透明边框 背景知识：rgba/hsla，在rgb/hsl的基础上增加了Alpha通道,用于设置颜色的不透明度（就是能透过多少背景） rgba接受四个数值，即rgba(red, green, blue,a),rgb可以为数值（0 ~ 255），也可以为百分比（0 ~ 100%），a表示不透明度(0~1),1为完全不透明，0表示完全透明。 rgba(0
通过EventTrigger改变Border的背景颜色，必须先设置背景色，否则没有Background.Color属性
dxm809的博客
10-27 725
<Window x:Class="ControlTemplates.ButtonWithAnimations" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ButtonWithAnimations" Height="300" Width="30.
边框与背景颜色
a541967687的博客
08-23 192
此次随笔记录，讲述在同时有边框、背景颜色，且颜色都带透明度时相互的影响。 问题的思考源于想要用圆角边框和背景，制作图片轮播的圆形按钮。 由于按钮需要在图片上方显示，所以为了减轻对图片的遮挡，改善视觉效果，需要给边框和背景加上透明度，于是我是这么写的 1 li{ 2 width: 18px; 3 height: 18px; 4 margin-...
CSS设置border圆角却被背景颜色覆盖了，怎么解决？
weixin_43343144的博客
05-13 8933
// 必须同时使用这个两个属性，才能解决背景覆盖圆角的问题 border-radius: 30upx; overflow: auto; 灵感来自于这篇文章：https://www.cnblogs.com/sanshi/p/9712426.html
wpf 怎么消除border边框颜色与背景色之间细线
Chersresting
03-22 970
写项目的时候发现这样一个现象 上面的border是设置borderbrush和background都为白色，但是视觉两者之间却有一条黑线，这其实是窗口背景色，不信可以改窗口颜色试试 <Border Background="White" CornerRadius="80" BorderThickness="10" BorderBrush="White"> </Border> 下面的border是处理之后的，其实就是再外面再包一个border
在css3中background-clip属性与background-origin属性的用法介绍
12-13
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间...
详解css中background-clip属性的作用
09-27
主要介绍了css中background-clip属性的作用,background-clip属性的通俗作用就是指定元素背景所在的区域,对css中background-clip属性的相关知识感兴趣的朋友一起看看吧
深入浅出CSS3 background-clip,background-origin和border-image教程
09-25
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。
解决CSS 中box-sizing与background-clip解决背景显示范围的问题
12-11
今天遇到的问题是出在我用了一个半透明的border，但却无法顺利地透过并显示背景的图案或颜色，后来发现原来box预设的border，其实是在这个box之内的，虽然border在box的内部，但其实与刚刚的box model并没有相违背，...
CSS设置背景颜色透明的两种方法
热门推荐
qq_45904018的博客
08-03 10万+
css opacity属性
css边框border颜色设置为透明transparent,如果背景色是渐变linear-gradient,会受到影响,边框还是会显示出来
weixin_42120767的博客
12-03 5807
设置一个元素的样式： background: linear-gradient(130deg, rgba(205, 144, 42, 0.9) 0%,rgba(245,213,115,0.3) 70%, rgba(205, 144, 42, 0.6) 100%); border: 3px solid transparent; 结果：按理说，设置transparent后边框应该是看不见的，在实战中(出现情况是在小程序，其他平台未测)发现，如果该元素也设置了渐变色，那么边框还是能显示出来 解决：将bor.
CSS：设置边框和背景
李鴻耀
09-26 2万+
应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性： 属性 说明 值 border-width 设置边框的宽度 度量单位（em、px、cm等） border-color 设置边框的颜色 英文单词、HEX、RGBa、HSLa border-style 设置边框的样式 参考下方表格 CSS提供的边框样式比较丰富，下面我将通过表格来进行说明：
边框颜色和背景色之间的关系
qq_38992657的博客
12-29 1420
首先，我们会设置背景色和边框颜色。如下 然而背景色外延到边框色，使边框色的灰度无效。 解决办法，就是被注释掉的这句神助攻样式。 去掉注释，还原我们想要的结果哦。 ...
设置背景颜色和边框颜色透明度不一致
u011498933的专栏
01-29 2937
分别对div的四个边框，div里面的填充颜色的透明度进行设置，代码如下： 边框颜色调整 input{ margin:100px; border:3px solid #0086EA; background-color: rgba(0,134,234,.3); } div { width: 100px; height:10
css背景色不填充边框，css的写法？
初漾的博客
07-15 5528
background-clip: padding-box;即可 支持度：IE9+background-clip的值 padding-box： 从padding区域（不含padding）开始向外裁剪背景。 border-box： 从border区域（不含border）开始向外裁剪背景。 content-box： 从content区域开始向外裁剪背景
html5border设置彩色,css中border颜色不同怎么设置？
weixin_28020031的博客
06-17 4328
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css中border简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-widthborder-styleborder-color我们可以使用border-color属性来设置border颜色不...
.profile-bg { background-color: transparent; background: url("../images/profile.jpg"); position: absolute; background-clip: border-box; background-attachment: scroll; background-origin: padding-box; background-repeat: no-repeat; left: 0px; top: 0px; height: 100%; z-index: 2; background-size: cover; background-position: -40px center, 0px center; width: 40%; }
最新发布
06-09
这是一段CSS代码，它定义了一个名为.profile-bg的元素的样式。具体来说，它将该元素的背景色设置为透明，然后使用url()函数引入了一张图片，该图片的路径为"../images/profile.jpg"。接着，它将该元素的position属性设置为absolute，使其脱离文档流并可以自由定位。background-clip、background-attachment、background-origin和background-repeat属性分别指定了背景图片的裁剪方式、滚动方式、起始位置和重复方式。left、top、height和width属性分别指定了该元素的左偏移、上偏移、高度和宽度。z-index属性则指定了该元素的层级顺序。最后，background-size属性指定了背景图片的尺寸，background-position属性指定了图片的位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值