Блог

Я просмотрел несколько ответов и чувствую, что настраиваю это точно так же, но это не работает.

Index.css моего документа устанавливает градиентный фон, который отлично работает. Тогда у меня есть нижний колонтитул, и он тоже работает. Но проблема возникает там, где я хочу добавить SVG в качестве фона в нижний колонтитул и установить для него непрозрачность.

Если я это сделаю, появится фоновое изображение, но непрозрачность влияет на весь нижний колонтитул, что, конечно, является плохим результатом.

 const Foot = styled.footer `
    position: relative;
    margin: 0px;
    padding-top: 2em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 2em;
    color: white;
    background-image: url('/logo.svg');
    opacity: 0.25;
}
`
  

Но если я сделаю это, что, похоже, так и должно работать, если я хочу, чтобы только фоновое изображение было полупрозрачным, а остальная часть нижнего колонтитула оставалась непрозрачной, тогда фоновое изображение вообще не отображается:

 const Foot = styled.footer `
    position: relative;
    margin: 0px;
    padding-top: 2em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 2em;
    color: white;
    
     amp;::before {
    content: "";
    background-image: url('/logo.svg');
    position: absolute;
    opacity: 0.25;
    }
}
`
  

Как мне настроить это так, чтобы фоновое изображение было полупрозрачным, а остальная часть нижнего колонтитула — нет?

Вот мой нижний колонтитул JSX, если это поможет:

 <Foot id="footer-page">
                    <Div>
                        <div className="container">
                            <div className="row">
                                <div className="col-lg-4 col-sm-12 text-center">
                                    <p className="lead">HUMAN RESOURCES SOLUTIONS></p>
                                    <img className="img-fluid" src="/assets/images/wbe-seal.png" alt="certified women owned business seal" />
                                </div>

                                <div className="col-lg-4 col-sm-12 text-center"><p className="lead">FOLLOW US ON <Span orange>SOCIAL MEDIA</Span></p>
                                        <A href="https://www.facebook.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-square fa-3x px-2"></i></A>
                                        <A href="https://www.instagram.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram fa-3x px-2"></i></A>
                                        <A href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin fa-3x px-2"></i></A>
                                        <A href="https://twitter.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-twitter-square fa-3x px-2"></i></A>
                                </div>
                            </div>
                        </div>
                    </Div>
                </Foot>
  

Похоже, вам нужно использовать одно двоеточие (:) там, где вы используете amp;::before псевдоселектор.

Кроме того, если это не сработает, вы можете попробовать использовать after псевдоселектор.

 const Foot = styled.footer `
    position: relative;
    margin: 0px;
    padding-top: 2em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 2em;
    color: white;
    
    amp;:before {
      content: "";
      background-image: url('/logo.svg');
      position: absolute;
      opacity: 0.25;
    }
}