Question

我如何重叠

	<p style="background-color:red; width:168px; padding:10px; margin-top:-168px;" class="kasten">

图片上的这个p标签并保持背景颜色：红色？

因为背景在与图片重叠时会变得透明......

感谢您的回答！

干杯，直到

Answer 1

而不是margin-top，请尝试使用：

position: relative;
top: -168px;

请参阅：https://codepen.io/anon/pen/prvWVo

Answer 2

我无法弄清楚你是否希望p元素背景透明或不透明，所以我会给你两个解决方案。
如果你想保留背景，重叠时不透明：

HTML

<div id="overlap">
  <p>Hello everyone, my background is transparent</p>
</div>

CSS

#overlap {
  background: url(http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

p {
  background-color: red;
  text-align: center;
  padding: 10px;
}

现在是透明的背景
HTML

<div id="overlap">
  <p>Hello everyone, my background is transparent</p>
</div>

CSS

#overlap {
  background: url(http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

p {
  background-color: red;
  text-align: center;
  padding: 10px;
}

所以我们在这里所做的就是为背景图像设置一个高度，这是你目前所需要的，因为此刻没有太多填充div。
然后我们设置一个background属性，给它我们想要的网址，在这种情况下我选择了一只小猫，no-repeat center center fixed这很重要，因为

no-repeat我们不希望图片重复
center我们希望图像水平和垂直居中
fixed你可以删除它，我倾向于但有些人喜欢它

接下来我们需要设置background-size

background-size: cover使用此功能，常见值为contain和cover

最后是我们的p标签取决于您想要实现的目标（透明与否）就像更改background-color值一样简单。

background-color: red简单的纯红色背景
background-color: rgba(255,0,0,.5)设置红色，绿色，蓝色和alpha，其中alpha代表透明度。
alpha的有效条目为0 - 1,1是实心，0表示透明。

在重叠图片时保持背景颜色

2 个答案: