html - 每边的 CSS 图像放置

Question

我试图在标题的每一侧放置相同的背景图像。所以一个以左边为中心，一个以右边为中心。我该怎么做呢 ？

h1{
background-color: navy;
color: #ffffff;
text-align: center;
background-image: url("isologo.png");
background-position: center right; 
background-repeat: no-repeat;
padding: 70px;
font-size: 50px;

}

Answer 1

如果我理解正确，那么要解决这个问题，您需要使用伪类 :before和 :after .有必要吗？

h1 {
  background-color: navy;
  color: #ffffff;
  text-align: center;
  padding: 70px;
  font-size: 50px;
}

h1:after {
  content: '';
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZU3qKXGbm1ZaRb0t8e2mrAONt-PwUZf190w&usqp=CAU");
  background-repeat: no-repeat;
  background-position: center;
  padding: inherit;
}

h1:before {
  content: '';
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZU3qKXGbm1ZaRb0t8e2mrAONt-PwUZf190w&usqp=CAU");
  background-repeat: no-repeat;
  background-position: center;
  padding: inherit;
}

<h1>hello</h1>