如何使得文字與圖片對齊是在CSS樣式設計中一個常見的問題。本文將講解如何實現圖片右上對齊文字的效果。

.img-container{
width: 200px;
height: 200px;
position: relative;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: cover;
}
.img-container p{
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
}

首先，我們需要利用相對定位（position: relative）來創造一個包含圖片和文字的容器（.img-container）。這個容器的寬度和高度可以根據需求進行設置。

其次，我們需要利用絕對定位（position: absolute）和top和right屬性來把文字放在圖片的右上角。為了使得文字不會覆蓋在圖片上，我們可以再給文字添加一個padding屬性。

最后，為了讓文字不會和圖片的背景混在一起，我們可以利用CSS中的背景透明度屬性（background: rgba(255, 255, 255, 0.8)）來讓文字的背景半透明。

以上就是實現圖片右上對齊文字效果的CSS樣式代碼。