wordpress - 如何在不使用 WordPress 中的表格的情况下获得完整的完整背景图像(无重复)？

Question

我将它放在 WordPress 的一个小部件中:

<div style="background-image: url('http://www.domain.net/img/subscribe.png'); 
background-repeat: no-repeat;"> </div>

但是结果是这样的:

当我想要这样的结果时:

所以它几乎没有显示我想要的背景图像的顶部。我怎样才能获得完整的图像——当然我不希望它重复 x 或重复 y？我应该使用 div 标签还是其他东西？在这方面的任何指导将不胜感激!

Answer 1

将 div 的宽度/高度设置为与背景图像相同的大小。我会推荐这样的东西:

HTML

<div class="newsletter-subscribe">
  <!-- any additional content can go here, like a <form> for example -->
</div>

CSS

.newsletter-subscribe {
  background-image: url('http://www.domain.net/img/subscribe.png');
  background-repeat: no-repeat;
  background-position: top left;
  width: 400px; /* whatever the picture width is */
  height: 300px; /* whatever the picture height is */
}

之所以将它放在样式表中而不是内联，是因为这样您就可以更轻松地将其他样式应用于您的容器(即 div.newsletter-subscribe)，以及在您的样式表中进行更改 - 而不是在模板和/或部分文件中进行更改。样式在样式表中比内联更容易维护。