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

最新推荐文章于 2024-08-22 16:10:15 发布
最新推荐文章于 2024-08-22 16:10:15 发布
阅读量1.5k 收藏
点赞数 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 中将绿色背景裁掉

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

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

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

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

CSS控制边框和背景
在到处之间找我
03-05 699
定义简单边框border属性（简写属性）元素的边框（border）是围绕元素内容和内边距的一条或多条线CSS border属性允许我们规定元素边框的样式、宽度和颜色。定义和用法border简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：• border-width• border-style• border-color如果不设置其中的某个值，也不会出问题，比如border: soli...
背景裁剪效果的文字(background-clip: text)
ruienger的博客
10-21 418
主要css属性 background-clip: text | border-box | padding-box | content-box 效果 实现 html <div class="text-wrapper"> <h1 class="cliped-text">background-clip: text</h1> <h1 class="cliped-text fixed-text"> background-clip: text<br
border和background
weixin_34109408的博客
05-15 243
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS属性-背景属性
最新发布
qq_72013756的博客
08-22 2718
从零开始学前端
边框与背景颜色
a541967687的博客
08-23 212
此次随笔记录，讲述在同时有边框、背景颜色，且颜色都带透明度时相互的影响。 问题的思考源于想要用圆角边框和背景，制作图片轮播的圆形按钮。 由于按钮需要在图片上方显示，所以为了减轻对图片的遮挡，改善视觉效果，需要给边框和背景加上透明度，于是我是这么写的 1 li{ 2 width: 18px; 3 height: 18px; 4 margin-...
border与background定位
超级丹的专栏
04-25 599
border与background定位
边框颜色和背景色之间的关系
qq_38992657的博客
12-29 1483
首先，我们会设置背景色和边框颜色。如下 然而背景色外延到边框色，使边框色的灰度无效。 解决办法，就是被注释掉的这句神助攻样式。 去掉注释，还原我们想要的结果哦。 ...
CSS background属性(背景属性)详解
09-25
使用这个属性，可以轻松设置背景颜色、图片、图片的显示方式、位置、大小，以及背景区域的裁剪和固定方式等。以下将详细介绍每个相关属性的含义和用法。 1. background-color background-color用于设置元素的背景...
07 - 背景background和圆角
xyyojl的博客
09-03 5516
背景background和圆角,你知道多少,快来了解一下吧
DIV+CSS创建网页-背景属性.pptx
11-01
- `background-clip`属性定义了背景图像被裁剪的区域。取值包括`border-box`（默认，从边框区域外裁剪背景）、`padding-box`（从内边距区域裁剪）和`content-box`（从内容区域裁剪）。 通过灵活运用这些背景属性，...
.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
background-clip、background-attachment、background-origin和background-repeat属性分别指定了背景图片的裁剪方式、滚动方式、起始位置和重复方式。left、top、height和width属性分别指定了该元素的左偏移、上偏移...
border的颜色被background-color覆盖
u013992330的博客
03-14 692
border的颜色被background-color覆盖，导致设置了border的颜色并没有完全生效。
CSS3 : background-origin背景开始与background-clip背景裁剪与区别和使用
webEvelement的博客
07-30 642
background-origin和background-clip同为CSS属性，并且同为banckgound-image服务。 background-origin 背景原点 background-origin代表的是背景图片开始的原点，其中三个属性值 content-box表示以内容区的左上角为原点展开背景图片 padding-box表示以内填充区左上角为原点展开背景图片 ...
background-color覆盖范围
热门推荐
Liya的博客
03-03 1万+
一般元素的background-color覆盖该元素的content,border,和padding。而margin不会显示该背景颜色，而是由外层元素的背景色决定。但body有所不同。如 ` body div ` 设置css属性： ``` *{margin:20px;padding:20px;} html{border:1px solid red;} body{ he
background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; ...
weixin_30539625的博客
07-19 1338
1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点 是 border的外边缘 http://www.w3cplus.com/content/css-background-origin...
CSS背景与边框
qq_44222205的博客
07-01 307
一、CSS的背景颜色默认渗透到border下面 可以用虚线边框验证 .box{ margin:100px auto; height: 100px; width: 100px; background-color: antiquewhite; border: aqua 10px dashed; } 二、多重边框 1、box-shadow的第四个参数 box-shadow：0 0 0 10px color； 缺点是只能构造出实现边框 .box{ height: 100px; width: 100px;
通过EventTrigger改变Border的背景颜色，必须先设置背景色，否则没有Background.Color属性
dxm809的博客
10-27 770
<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.
border和css的背景属性
责任与担当
05-04 1236
1:background-color:red; 2: 网页中图片的展示形式：img标签导入的图片 背景图（背景图不占据空间）; background-image: url(); 背景图默认显示状态： a:当背景图小于容器尺寸 ： 平铺; b:当背景图等于容器尺寸 ： 一张; c:当背景图大于容器尺寸 ： 只显示容器区域; ...
css3 background-clip 背景色裁剪，显示范围；css背景图不含padding
MELANCHOLY ❤ ◁ ❚❚ ▷
03-14 1216
css3 background-clip 背景色裁剪，显示范围；css背景图不含padding。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值