background-color和border-color设置颜色相同，渲染出来不一致

最新推荐文章于 2023-04-13 09:43:06 发布
最新推荐文章于 2023-04-13 09:43:06 发布
阅读量363 收藏
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Katto_Cara/article/details/129817208
版权
在开发中，遇到表格hover时，相同颜色的border-color和background-color显示不一致的问题。作者发现将边框的透明度设为0可以使两者显示一致，推测可能是由于颜色透明度导致的渲染差异。
摘要由CSDN通过智能技术生成 
      border-color: rgba(92, 107, 208, 0.1);
      background-color: rgba(92, 107, 208, 0.1);

 开发的时候为了给表格加hover状态，遇到 background-color和border-color设置颜色相同，渲染出来效果却不一致的情况。 不要慌张，又是面向百度编程的一天，把边框的透明度变成0就神奇的一致了。

大胆猜测可能是因为背景色和边框颜色都有透明度导致的。

border-color: rgba(92, 107, 208, 0);

 

Katto_Cara
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html边框设置为背景同色,css边框与背景
weixin_39885683的博客
06-25 1402
1.半透明边框默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip 属性来调整。这个属性的初始值是border-box，意味着背景会被元素的border-box(边框的外沿框)裁切掉。设置为padding-box，背景不会透过边框所在的范围，览器就会用内边距的外沿来把背景裁切掉。border: 10px solid pink;background: red;backg...
css样式vue元素从一个背景色和字体颜色缓缓变成另一种颜色
stars______的博客
03-30 540
hover悬停在元素上。.2s为渐变时间是2秒。
背景透明的2种写法。效果不一样
南北极之间
10-22 318
1，如果单独设置透明度的话。该元素下面的所有内容都会透明 background-color: #000; opacity: 0.5; 2，如果把颜色和透明度写在一起。就只会那一个元素透明。不会影响其他的 background: rgba(0,0,0,0.6); ...
050_学习的CSS属性
aihiao的专栏
10-30 199
尺寸属性(Dimension) height: 设置元素高度。 max-height: 设置元素的最大高度。 max-width: 设置元素的最大宽度。 min-height: 设置元素的最小高度。 min-width: 设置元素的最小宽度。 width: 设置元素的宽度。 背景属性(Background) background: 在一个声明中设置所有的背景属性。 background-color: 设置元素的背景颜色。 background-image: 设置元素的背景图像。 background-r
设置背景颜色和边框颜色透明度不一致
u011498933的专栏
01-29 2957
分别对div的四个边框，div里面的填充颜色的透明度进行设置，代码如下： 边框颜色调整 input{ margin:100px; border:3px solid #0086EA; background-color: rgba(0,134,234,.3); } div { width: 100px; height:10
DIV border边框显示不完全问题的解决方法
10-30
而边框（`border`）是CSS中一个重要的属性，它允许我们为元素添加清晰的边缘，以增加视觉效果和区分内容区域。然而，有时可能会遇到`div`的边框显示不完全或显示异常的问题，这通常是由于浏览器兼容性、浮动元素、...
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
:header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" > <el-table-column ...
React styled-components设置组件属性的方法
10-18
通过使用这个方法，你可以确保所有的自定义属性都能被正确设置和使用。下面是如何使用attr方法的一个例子： ```javascript const ContentDiv = styled.div.attrs(props => ({ poster: props.poster, audio: props...
select和input不会继承字号body font-size
12-03
比如颜色（`color`）、字体家族（`font-family`）和字体大小（`font-size`）通常会被继承，而像边框（`border`）、背景（`background`）和行高（`line-height`）等则不会。然而，对于`select`和`input`这样的表单...
CSS代码格式化和压缩的方法与技巧
12-02
2. **删除注释**：注释不参与页面渲染，所以会在压缩时被移除。 3. **缩写属性**：如上所述，利用CSS的缩写特性减少字符数量。 4. **合并选择器**：如果可能，合并相似的选择器以减少重复代码。 5. **移除未使用的...
background-color和color的区别
drawlessonsfrom的博客
03-26 3160
1、功能不同 background-color用于设置背景颜色，而color用于设置字体的颜色。 2、范围不同 background-color属性所设置的颜色会填充元素的内容、内边距和边框区域，扩展到边框的外边界（不包括外边距）。 color属性设置了一个元素的前景色，在HTML中就是元素的文本颜色。光栅图像不受color影响。这个颜色可以应用到元素的所有边框，但是当设置了border-color的颜色时，其将显示所设置的border-color属性的颜色。即border-color所设置的颜色会覆盖co
CSS深入理解学习笔记之border
weixin_33849215的博客
07-14 111
1、border-width 　　border-width为何不支持百分比：语义和使用场景决定的，现实中各种边框本身的概念就不存在百分比的使用方法。 　　border-width支持关键字：thin、medium（默认）、thick，其大小分别是1px、3px、5px（IE7除外）。 　　border-width默认值为何是medium（3px）：因为border-style为double的...
CSS之背景样式及边框样式
sz1125218970的博客
12-10 1045
笔记
table边框渲染bug
qq_26889291的博客
04-02 143
解决方法本来设置自动计算高度，calc得到高度值为27px,将height值改成28或者30就没这个问题
background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; ...
weixin_30539625的博客
07-19 1308
1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点 是 border的外边缘 http://www.w3cplus.com/content/css-background-origin...
QTableView 设置selection-background-color和border不同时生效问题记录
qq_36939187的博客
04-13 729
qtableview在使用过程种设置qss样式，设置选中时的背景色，以及边框颜色，不能同时生效。
background-color、background-image、background-attachment、background-position等属性详解
请叫我二狗哥
04-09 2418
background-color背景颜色 background-color背景颜色是包含边框border，边框如果不设置颜色，默认会采用文本颜色，而文本颜色默认是黑色。 background-image背景图片 background-image背景图片占据了元素的全部尺寸，包括内边距padding和边框border，但不包括外边距margin。默认背景图片位于元素的左上角，并且在水平和垂直方...
用CSS设置颜色、背景和图像效果
热门推荐
微风洋洋的博客
02-08 1万+
这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识，重要的知识点就是图文混排，尤其要注意图片的位置，为后面将相对位置、绝对位置做好铺垫。
Bootstrap中的color，bgcolor，background-clor，border-color
SnailTyan
10-26 4525
color，bgcolor，background-color，border-color的区别
<template #default="scope"> <el-tag class="mx-1" effect="dark" v-if="scope.row.level == '0'" style="background-color:rgb(247, 7, 7);border-color:rgb(247, 7, 7);"> 严重 </el-tag> <el-tag class="mx-1" effect="dark" v-if="scope.row.level == '1'" style="background-color:#f56c6c;border-color:#f56c6c;"> 高级 </el-tag> <el-tag class="mx-1" effect="dark" v-if="scope.row.level == '2'" style="background-color:#e6a23c;border-color:#e6a23c;"> 中级 </el-tag> <el-tag class="mx-1" effect="dark" v-if="scope.row.level == '3'" style="background-color:rgb(4, 138, 216);border-color:rgb(4, 138, 216);"> 低级 </el-tag> </template> </el-table-column>给这段代码实现筛选功能
最新发布
07-15
要为这段代码实现筛选功能，您可以使用 `filter-method` 属性以及一个 `filteredData` 数组来存储过滤后的数据。下面是一个示例实现： ```javascript data() { return { filtersList: [ { text: '严重', value: '0' }, { text: '高级', value: '1' }, { text: '中级', value: '2' }, { text: '低级', value: '3' } ], filteredData: [] }; }, methods: { filterLevel(value, row) { return row.level === value; }, applyFilter() { this.filteredData = this.tableData.filter(row => { const filterValue = this.$refs.table.store.states.filters['level']; if (filterValue && filterValue.length > 0) { return filterValue.includes(row.level.toString()); } return true; }); } } ``` 在这个示例中，我们在组件的 `data` 中添加了一个名为 `filteredData` 的数组，用于存储过滤后的数据。在 `filter-method` 方法中，我们检查每一行数据的 `level` 属性是否与过滤器值相等。然后，在 `applyFilter` 方法中，我们根据过滤器的值从 `tableData` 中筛选出符合条件的数据，并将结果存储在 `filteredData` 数组中。 请注意，上述示例中的 `tableData` 是您自己定义的表格数据数组。您需要根据您的实际情况进行调整。 此外，您还需要在模板中的 `el-table-column` 上添加 `:filtered-value.sync="filters"` 和 `@filter-change="applyFilter"` 属性，以实现筛选功能。具体实现如下： ```html <el-table-column label="告警等级" prop="level" width="300" align="center" sortable :filters="filtersList" :filter-method="filterLevel" :filtered-value.sync="filters" @filter-change="applyFilter"> <template #default="scope"> <!-- 标签渲染逻辑 --> </template> </el-table-column> ``` 这样，当用户选择过滤器时，会触发 `applyFilter` 方法进行筛选，并将结果存储在 `filteredData` 数组中。您可以在模板中使用 `filteredData` 数组来渲染已筛选的数据。 请注意，示例中使用了 `element-ui` 的 `<el-table>` 组件。您需要根据您使用的组件库进行相应的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值