我想要图片上的文字，所以我使用以下css代码
.blur{
width:100%;
height: 500px;
background-image:url(./images/14.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.b-cont{
width: 100%;
height: 500px;
font-family: Raleway;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
color: #ffcd3c;
font-size: 72px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
span{
color: white;
}
html代码:
<body>
<div class="blur">
<div class="b-cont">
Background of laptop is good but have to <span>blur</span> for the website
</div>
</div>
</body>
我想给句子加不同的颜色，所以添加span标记，但是它给出了颜色，但是它把句子分开了
看这个
导致这种情况的问题是您指定了要显示为flex布局的div。通过从
.blur{
width:100%;
height: 500px;
background-image:url(./images/14.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.b-cont{
width: 100%;
height: 500px;
font-family: Raleway;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
color: #ffcd3c;
font-size: 72px;
justify-content: center;
align-items: center;
text-align: center;
}
span{
color: white;
}
<body>
<div class="blur">
<div class="b-cont">
Background of laptop is good but have to <span>blur</span> for the website
</div>
</div>
</body>
代码Pen:https://codepen.io/chingucoding/pen/grjogrk
