html - 文字不显示
问题描述
.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;
}
<div class="sport">
<p class="sportsandactivis">Sports and Activis</p>
</div>
图片显示正确,但“sports and activitis”里面的文字没有出现,为什么?
解决方案
您的文字没有出现,因为您正在使用content
! 这完全取代了你.sport
元素的内容!…</p>
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>
希望能帮助到你。
推荐阅读
- unit-testing - 如何使用 Jest 模拟远程网站对单元测试 Puppeteer 代码的响应?
- html - CSS resize image 手机版
- javascript - 俄罗斯方块片从网格旋转
- windows - 将每一行文本创建为变量,并且它们在批量循环中不断变化
- python - 循环问题(python):变量未正确评估
- com - 为什么我的 COM 加载项在 Outlook 桌面中丢失?
- pandas - 将每日数据转换为每月数据并在熊猫中获得几个月的最后一个值
- origen-sdk - 如何强制将所有 bin 转换为 93k multibins 的 gem 输出 93k 本机 bin?
- react-native - 在渲染视图时滚动 KeyboardAwareScrollView 以结束
- wordpress - 自定义帖子类型的单个帖子模板覆盖