设置content:url()的div图片正常显示，为何内部文本无法显示？

你遇到的情况是：图片能正常显示，但<p>标签里的文本完全看不到。我们先看一下你的代码：

你的CSS代码 #

.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; }

你的HTML代码 #

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

问题根源 #

当你给一个普通块级元素（比如这里的<div>）设置content属性时，浏览器会把这个元素转换成替换元素——就像<img>标签一样，它的内部所有内容会被content指定的资源完全替换掉。所以你的<p>标签其实已经被那张sport.png图片覆盖/替换了，自然看不到文本。

解决方案 #

有两种常见的修复方式，你可以根据需求选择：

方案1：用background-image代替content

这是最直接的方式，把图片作为div的背景图，这样内部的文本元素就能正常显示了。修改后的.sport CSS如下：

.sport { 
  background-image: url("../img/sport.png");
  background-size: cover; /* 确保图片覆盖整个容器 */
  background-position: center; /* 居中显示图片 */
  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; 
}

修改后，div的背景是sport.png，内部的<p>标签会正常显示在背景图上方。

方案2：用伪元素来加载图片

如果你一定要保留content属性的用法，可以把图片放到div的伪元素里，这样不会影响内部内容。修改CSS：

.sport { 
  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; 
  position: relative; /* 让伪元素相对于这个div定位 */
}

.sport::before {
  content: url("../img/sport.png");
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 把图片放到文本下方 */
}

这里用::before伪元素加载图片，并通过z-index把它放到文本后面，这样文本就能正常显示在图片上方了。

内容的提问来源于stack exchange，提问作者Charanoglu