CSS是一种用于网页设计的样式表语言，用于控制网页的布局、样式和响应式布局等。在CSS中，大家可以使用文字环绕、字体、字号、颜色、大小等属性来控制文字的样式。
然而，有时候大家可能会遇到文字被图片所挡住的情况。这种情况通常是由于图片的宽高比与文字的宽高比不匹配导致的。下面大家来探讨一下如何解决这种问题。
一、使用绝对定位
使用绝对定位可以使得大家需要显示的文字位于图片之外。例如，大家可以使用：
“`css
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
在这个例子中，大家将“.box”元素设置为绝对定位，并且将top和left属性设置为50%和50%，并且使用transform属性将元素移动到图片之外。
二、使用伪元素
使用伪元素也可以解决这个问题。大家可以将需要显示的文字作为伪元素插入到HTML元素中，然后将该伪元素设置为一个包含图片的HTML元素。例如，大家可以使用：
“`html
<div class=”box”>
</div>
三、使用绝对定位和边框
使用绝对定位和边框也可以解决这个问题。大家可以使用绝对定位将文字和图片都定位到一个特定的位置，然后使用边框属性将图片边框设置为0，文字边框设置为白色。例如，大家可以使用：
“`css
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 0;
padding: 10px;
width: 100%;
height: auto;
.box p {
color: #fff;
font-size: 16px;
margin: 0;
以上就是关于CSS文字被图片挡住了的三种解决方法，希望对您有所帮助。