這是一句圖片描述
在網頁設計中，圖片與文字是不可分割的關系。而如何在圖片上添加文字呢？CSS提供了一種方便的方法。下面我們就來學習一下如何用CSS在圖片上加文字。
1. 首先，我們需要一個包含圖片的div或者其他容器（比如或者 ）。 2. 接下來，用CSS樣式來控制圖片和文字的位置和大小。 .container { position: relative; /* 設置容器為相對定位 */ width: 500px; /* 容器寬度 */ } img { display: block; /* 圖片改為塊級元素 */ width: 100%; /* 圖片寬度撐滿容器 */ height: auto; /* 圖片高度自適應 */ } .caption { position: absolute; /* 描述文字絕對定位 */ bottom: 0; /* 文字位于圖片底部 */ left: 0; /* 文字左側對齊 */ right: 0; /* 文字右側對齊 */ background-color: rgba(0, 0, 0, 0.5); /* 背景顏色半透明 */ color: #fff; /* 文字顏色為白色 */ padding: 10px; /* 添加內邊距，增加可讀性 */ margin: 0; /* 去除默認邊距，更加緊湊 */ }
以上代碼中，我們使用了position定位和背景顏色的透明度來實現在圖片上添加文字的效果。當然，你也可以根據需要，調整它們的數值來達到不同的效果。
在實際的網頁設計中，靈活運用CSS風格，可以方便地在圖片上添加各種不同的文字描述，增強內容的吸引力和閱讀效果。
上一篇地球旋轉css3