Question

这是我的HTML代码

.paragraph1 {
  background: black;
  opacity: 0.5;
  font-family: Verdana;
  color: #9069CA;
  text-align: left;
  font-size: 18px;
  padding-right: 420px;
  padding-left: 135px;
}

<div class='paragraph1'>
  <p>
    This is the paragraph.
  </p>
</div>

如何阻止段落背景颜色遍布整个页面？

Answer 1

试试这个

.paragraph1 {
  background: black;
  opacity: 0.5;
  font-family: Verdana;
  color: #9069CA;
  text-align: left;
  font-size: 18px;
  padding-right: 420px;
  padding-left: 135px;
  display: inline-block;
    }

或

.paragraph1 {
  background: black;
  opacity: 0.5;
  font-family: Verdana;
  color: #9069CA;
  text-align: left;
  font-size: 18px;
  padding-right: 420px;
  padding-left: 135px;
  width:1px;
  white-space: nowrap;
 }

Answer 2

你想要段落的背景然后改变：

<div>
    <p class="paragraph`">This is it</p>
</div>

Answer 3

它并不遍布整个页面 - 它只涵盖代码中的.paragraph DIV。如果该DIV还包含其他元素，并且您希望将其背景限制为p元素，并且您无法更改HTML（如我之前的答案），则可以更改CSS：< / p>

＆＃13;

.paragraph1 {
  opacity: 0.5;
  font-family: Verdana;
  text-align: left;
  font-size: 18px;
  padding-right: 320px;
  padding-left: 135px;
}
.paragraph1 > p {
  background: black;
  color: #9069CA;
}

＆＃13;

<div class='paragraph1'>
  <p>
    This is the paragraph.
  </p>
</div>

＆＃13;

如何在背景中避免背景颜色遍布整个页面？

3 个答案: