更改背景图像的不透明度

Question

我使用 CSS 将 SVG 图像添加到我的页面背景，但是我试图更改不透明度但没有运气。我尝试添加图像标签，但我更喜欢通过 background-image 属性添加图像。甚至可以改变不透明度吗？ 目标是创建一个带有 Harley Davidson 标志（不透明）的 Bootstrap 轮播。

请在下面查看我的 CSS 代码。

提前感谢您的帮助。

#page2 {
  background-image: url(h-d-logo-shield.svg);
  background-repeat: no-repeat;
  background-size: 900px;
  background-position: center;
  position: absolute;

  display: flex;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}

.carousel {
  width: 800px;
  height: 500px;
  margin: auto;
}

Answer 1

是的 可能的。您需要在元素之前添加它的背景。

像这样。

#page2 {
        position: relative;
        display: flex;
        background-color: #fff;
        height: 100vh;
        width: 100%;
      }
#page2::before {
        content: "";
        background-image: url(h-d-logo-shield.svg);
        background-repeat: no-repeat;
        background-size: 900px;
        background-position: center;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.75;
    }

Answer 2

您也可以在您的 css 中设置.svg-bg:opacity:0.5，或者，直接在文本编辑器上打开 svg 并更改 svg 代码中的不透明度，如下所示：

<div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:0.7;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
  <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:0.7;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
  <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svgfill-="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:0.5;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>
  
   <div style="width:100px;">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="opacity:1;fill:#007aff;fill-opacity:0.3;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>

   <div style="width:100px;">
    <svg style="opacity:0.5" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">

    <path style="fill:#007aff;stroke:#000;stroke-width:12px;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
    </svg>
    </div>

请注意，opacity 与 css opacity 完全相同。它的取值范围为 0（透明）到 1（完全不透明），适用于整个路径或任何其他元素。

还有fill-opacity和stroke-opacity分别用于改变fill或stroke的不透明度。

还要注意，在最后一个 svg 中，我从路径元素中删除了所有不透明度修饰符，并添加了 style="opacity:0.5" 以影响整个 svg。

您还可以通过设置 fill-opacity, stroke-opacity and opacity 来影响 css 文件中的 svg 不透明度，但要做到这一点，您应该删除 svg 中的任何内联修饰符，因为内联修饰符像内联 css 一样具有优先权。

在svg 代码中或通过css 可以完美工作的是这种使用rgba 的方法，就像在css 中一样。像fill:rgba(255, 255, 255, 1) 这样使用它可以编写更短的代码，因为您不必使用fill-opacity，与stroke:rgba(0, 0, 0, 1) 相同，它替换了stroke-opacity。这适用于必须的现代浏览器。