Question

我正在做一个噩梦，试图让一小段文字放在我的页面中心的图像上。我所管理的最接近的是文本框现在稍微偏右。

我试图通过使用以图像为背景的Div类来实现此目的，并在div类“TEST”中使用段落内的文本。我是这样做的，因为我后来想要在悬停时制作它的动画，但是目前我只是想让文字放在图像的顶部！

我认为保证金：自动0 ;会有所帮助，但它引起了更多的问题，所以我删除它并尝试显示：内联; 而不是让我更接近。现在我完全没有想法......

这是p CSS：

p  {    
    background: rgba(0,0,0,1);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 2px;
    line-height: 28px;
    text-align: center;
    position: absolute;
    bottom: 0;
    margin: 0;
    display: inline;
}

这是Div CSS及其类：

div { 
    height: 200px;
    margin: 40px 0 0 0;
    position: relative;
}

.TESTimage {
      background-image: url("https://eccentric.productions/assets/roundlogo");
      background-size: 100px; 
      background-repeat: no-repeat;
      background-position: center;
      height: 100px;
 }

最后，HTML的相关部分：

<body>
    <div class="TEST">
        <p>
            Writing
        </p>
    </div>
</body>

非常感谢能帮助我的人，我已经使用了Stack Overflow多年，但这是我第一次发布问题。你们大家做的很棒！

Answer 1

您必须删除p标记中的position: absolute;我才能删除.test类中的background-position: center center;以便于查看。这里有html代码

  <!DOCTYPE html >
<html >
<head>
<style type="text/css">
p  {    
    background: rgba(0,0,0,1);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
     background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
     background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 2px;
    line-height: 28px;
    text-align: center;

    bottom: 0;
    margin: 0;
    display: inline;
}

div { 
    height: 200px;
    margin: 40px 0 0 0;
    position: relative;
    }

.TEST {background-image: url("https://eccentric.productions/assets/roundlogo");
      background-size: 100px; 
      background-repeat: no-repeat;

      height: 100px;

      }
</style>
</head>

<body>
    <div class="TEST">
    <p>
    Writing
    </p>
    </div>
</body>
</html>

希望这个帮助

Answer 2

你不能说保证金：0自动或文本对齐：中心到绝对位置你必须左或右。我会给p提供一些宽度，如60px和左：calc（50％ - 30px）;

p  {    
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 2px;
line-height: 28px;
position: absolute;
width: 60px;
bottom: 0;
margin: 0;
left: calc(50% - 30px);
}

Answer 3

这是你想要实现的吗？ http://codepen.io/anon/pen/cCbtA

我在图片周围添加了边框，以便更容易看到。

很抱歉，如果我误解了你想要的东西，但希望它有所帮助！

HTML

 <div class="test">
    <p>
        Writing
    </p>
</div>

CSS

  .test {
  background-image: url("https://eccentric.productions/assets/roundlogo");
  background-size: 100px; 
  background-repeat: no-repeat;
  background-position: center;
height: 200px;
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #ccc;
 }


.test p {
text-align: center;
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
margin:0;
color: #fff;
}

Answer 4

如果您希望文字只是放在图片顶部，那么这可能是您的追求？ http://www.w3schools.com/css/css_image_transparency.asp

<p>文本左对齐，但我需要它在</p> <div>类</div>中的图像背景之上

4 个答案: