Блог

Главная - Вопросы по программированию - Измените непрозрачность фонового изображения

Измените непрозрачность фонового изображения

#css #background-image #opacity

Вопрос:

Я добавил изображение SVG на фон своей страницы с помощью CSS, однако я безуспешно пытаюсь изменить непрозрачность. Я попытался добавить тег изображения, но я бы предпочел добавить изображение с помощью свойства background-image. Можно ли вообще изменить непрозрачность? Цель состоит в том, чтобы иметь загрузочную карусель с логотипом Harley Davidson (в непрозрачности) за ней.

Пожалуйста, посмотрите мой 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;
}

Ответ №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;
    }

Ответ №2:

Вы также можете установить .svg-bg:opacity:0.5 в своем css или открыть 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 я удалил все модификаторы непрозрачности из элемента path и добавил a style="opacity:0.5" , чтобы повлиять на весь svg.

Вы также можете повлиять на непрозрачность svg из файла css, установив там fill-opacity, stroke-opacity and opacity , но для этого вам следует удалить любой встроенный модификатор в svg, потому что встроенные модификаторы имеют предпочтение, как и встроенный css.

Что-то, что будет идеально работать внутри svg кода или через css этот подход, используется rgba так же, как в css . Используйте его так fill:rgba(255, 255, 255, 1) , чтобы можно было написать более короткий код, который вам не нужно использовать fill-opacity , тот же stroke:rgba(0, 0, 0, 1) , который заменяет stroke-opacity . Это прекрасно работает для всех современных браузеров.

Метки: