css字和图怎么弄到一行 |纯css3背景文本动画

.container{
width: 500px;
height: 50px;
}
.text{
display: inline-block;
width: 200px;
height: 50px;
font-size: 18px;
line-height: 50px;
}
.image{
display: inline-block;
width: 150px;
height: 50px;
background: url(image.jpg) no-repeat;
background-size: contain;
}

在上述代码中，大家首先建立了一个父级容器.container，设置了容器的宽度和高度。大家将文本容器.text和图片容器.image都设置为display:inline-block，这样它们就会排列在同一行。

对于文本容器，大家设置了width和height属性，让其具有一定的宽度和高度，并设置了文字大小和行高，让文字居中显示。

对于图片容器，大家设置了其width和height属性，并将其背景设置为图像，在这里大家使用了背景图片background和背景图片大小background-size属性，让图像在容器内等比例缩放填充，同时保证图片容器也具有一定的宽度和高度。

使用display:inline-block属性可以让大家方便地在CSS中排列文字和图片等行内元素，同时定制元素的大小和样式，实现更加灵活的布局。