CSS中可以使用background-image屬性將圖片作為元素的背景。而通過CSS3的transform屬性，我們還可以控制文字在圖片上的顯示方向，實現文字在圖片上橫向顯示的效果。下面是示例代碼：

<div class="image-text">
<p>這是一段需要在圖片上橫向展示的文字。</p>
</div>

下面是CSS樣式代碼：

.image-text{
position: relative;
display: inline-block;
background-image: url("圖片地址");
background-repeat: no-repeat;
background-size: cover;
padding: 10px;
}
.image-text p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

通過position屬性的值為relative，我們將父元素設置為相對定位，使子元素可以使用absolute的定位方式相對于父元素進行定位。接著，設置背景圖片和相關樣式。最后，對包含文字元素的p標簽進行樣式設置。其中，transform屬性中的參數旋轉文字的角度可以根據需要進行調整，white-space, overflow和text-overflow的設置可以保證文字在圖片邊界內顯示，而不會超出圖片范圍。