Question

＆＃13;

.sport
{
  content: url("../img/sport.png");
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}

＆＃13;

<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

＆＃13;

图像显示正确但文字内部＆＃34;运动和活动＆＃34;没有出现，为什么？

Answer 1

您的文字未显示，因为您使用的是content！这完全取代了.sport元素的内容！...

content通常用于在::before和::after伪元素上生成内容，但不应用于更改HTML元素的内容。

https://developer.mozilla.org/en-US/docs/Web/CSS/content

...您必须使用background-image代替：

.sport
{ /* Changed "content" to "background-image", and added a working meow image */ 
  background-image: url("http://placekitten.com/300/310"); 
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}

<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

希望它有所帮助。

Answer 2

将.sport内的css从内容更改为background-image

.sport
{
  background-image: url("../img/sport.png");
  background-color: rgba(0,0,0,1.0);
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis
{
  background-color: rgba(255,255,255,0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat',Helvetica,Arial,serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255,255,255,1.0);
  text-align: center;
  line-height: 27.0px;
}

<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

Answer 3

将Command课程设置为.sport当前的编码方式，background-image课程将涵盖.sport课程。

尝试：

.sportandactivis

然后将width: 100%; background-image: url("../img/sport.png"); background-position: 0%, 0%, 50%, 50%; background-size: auto, cover;课程定位在顶部，.sport定位或absolute定位如下：

flex

Answer 4

您应该更改CSS或HTML，我们可以通过两种方法解决此问题。

方法1：

将CSS中的content更改为background-image。

请在此处查看代码https://jsfiddle.net/59ozuesp/

方法2：

像这样更改HTML：

<div class="sport"></div>
<p class="sportsandactivis">Sports and Activis</p>

小提琴：https://jsfiddle.net/5gwbax4d/

实际上，content属性用于::before和::after伪元素，以插入生成的内容。使用content属性时，将完全替换您的内容。我希望你明白。

Answer 5

将此添加到您的css

  background-image: url(https://placehold.it/150x150);
  background-repeat:no-repeat;
  background-size:cover;

并从.sports类

中删除内容

＆＃13;

.sport {
  background-image: url(https://placehold.it/150x150);
  background-color: rgba(0, 0, 0, 1.0);
  background-repeat:no-repeat;
  background-size:cover;
  top: 61px;
  height: 310px;
  width: 300px;
  position: absolute;
  margin: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sportsandactivis {
  background-color: rgba(255, 255, 255, 0.0);
  top: 142px;
  height: auto;
  width: auto;
  position: absolute;
  margin: 0;
  left: 48px;
  font-family: 'Montserrat', Helvetica, Arial, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22.0px;
  color: rgba(255, 255, 255, 1.0);
  text-align: center;
  line-height: 27.0px;
}

＆＃13;

<div class="sport">
  <p class="sportsandactivis">Sports and Activis</p>
</div>

＆＃13;

文字没有显示

5 个答案: