css背景颜色会覆盖左边框颜色吗

Posted 2023-04-15

是的，会覆盖左边框的颜色。
因为在进行css背景颜色设置时，如果设置的过程中稍有疏忽，一不小心就有可能导致颜色背景的被覆盖。所以在进行操作时必须小心，小心，再小心，严格按照规章制度进行。 参考技术A 要知道Background-image（背景图片）是如何覆盖盒子的，要先了解Background-origin。Background-origin默认值为padding-box(图片相对于内边距框来定位),以下内容是在Background-origin为默认值的情况来说的
Background-origin是CSS3Background的一个扩展属性，从字面意思上来看就是背景图片位置的起点（background-position的原点）,默认也就是下图中的位置。在border的内边缘处。

Background-repeat默认值为repeat,背景图片会平铺在盒子区域内，上边框下面覆盖的是图片的下部分，左边框覆盖的是图片右边部分
Background-repeat值为no-repeat时，背景图片不平铺，Background-image（背景图片）默认覆盖的位置是也就是盒子除掉上边框和左边框的所有地方。
而Background-color的原点在border的外边缘处，所以Background-color(背景颜色)覆盖的是盒子的整个区域

CSS/SCSS/bootstrap :: 覆盖 bootstrap 中的打印设置 :: 更改背景：透明！对颜色很重要

【中文标题】CSS/SCSS/bootstrap :: 覆盖 bootstrap 中的打印设置 :: 更改背景：透明！对颜色很重要

【英文标题】：CSS/SCSS/bootstrap :: override print settings in bootstrap :: change background:transparent ! important to a color

【发布时间】：2013-03-17 12:14:58

【问题描述】：

我的引导 CSS/打印有问题。

在引导 CSS (reset.css) 中，所有内容都已清除以供打印

@media print 
  * 
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  

但我必须打印几行彩色。我的桌子是这样的：

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

我将它嵌入到我的代码中，但它不起作用：

@media print 

  #task-summary
    .success
      background-color: #DFF0D7 !important;
    
  

我已经尝试过使用 display: none 是否排除 css .. 它可以工作（不显示行）并且似乎在正确的位置。

有人知道如何在不编辑 bootstrap 的 reset.css 的情况下设法覆盖 bootstrap css 命令吗？

【问题讨论】：

您的浏览器可能试图变得聪明并拒绝打印背景颜色。检查您的浏览器设置。

您用户的浏览器设置将覆盖此设置，请参阅此答案：***.com/a/3894013/1064286

谢谢sevenseacat，你给了我正确的方向......用-webkit-print-color-adjust:exact;为chrome7safari修复了它；现在将谷歌寻找IE的解决方案

检查你的嵌套...

【参考方案1】：

我遇到了同样的问题。当您打印页面时，background-color: ...; 选项在表格行中不起作用。将 CSS-Selector 更改为：

@media print 

  #task-summary .success td 
    background-color: #DFF0D7 !important;

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact;
  

在此更改后一切都应该正常工作。

【讨论】：

它是“-webkit-print-color-adjust:exact;”让这对我有用的行。

【参考方案2】：

@media print 
    .success 
      background-color: #DFF0D7 !important;
        

或者

@media print 
    #task-summary .success 
      background-color: #DFF0D7 !important;
      

或者

@media print 
    #task-summary > #process-summary .success 
      background-color: #DFF0D7;