文字圍繞圖片展示(css)

使用CSS文字圍繞圖片的方式可以讓你的網頁更具有吸引力和美感，本文將介紹如何實現這樣的效果。

首先我們需要定義一個HTML代碼，如下所示：

<div class="image-wrapper">
<img src="image.jpg" alt="Image">
<p>這里是文字描述</p>
</div>

以上代碼創建了一個div容器來包含圖片以及圖片下面的文字描述。圖片被包含在img標簽中，而文字則是包含在p標簽中。

接下來，我們需要在CSS文件中添加以下代碼：

.image-wrapper {
position: relative;
width: 500px;
height: 500px;
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
.image-wrapper p {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
}

以上代碼分別對于容器、圖片、文字分別進行了樣式定義。

首先是容器，我們將其設置為相對定位(position: relative)并給出固定寬高(width: 500px, height: 500px)。接下來是圖片，我們將其設置為最大寬度100%(max-width: 100%)，高度自適應(height: auto)。最后是文字，我們將其設置為絕對定位(position: absolute)，并在左上角(top: 0, left: 0)。我們還為文字容器(width: 50%, height: 50%)添加了一些內邊距和背景顏色。

最后的效果呈現出來，就是圖片和文字完美圍繞顯示，并顯示出美觀的效果。這樣的方式使得文字和圖片更加的協調和融洽，也更加的讓網頁的美感得到了提升。