CSS中的img屬性title,是指HTML中的元素的title屬性,它用于設置當用戶將鼠標懸停在圖片上時顯示的提示文本。這個屬性的設置可以通過CSS樣式來控制,下面是示例代碼:
img { border: 1px solid black; padding: 5px; background-color: white; -webkit-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; -webkit-transition: -webkit-box-shadow 0.2s; transition: box-shadow 0.2s; } img:hover { -webkit-box-shadow: 0 0 10px #000000; box-shadow: 0 0 10px #000000; cursor: pointer; } img[title]:hover:after { content: attr(title); padding: 5px 10px; color: #ffffff; background-color: #000000; position: absolute; z-index: 9999; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: 100%; white-space: nowrap; font-size: 14px; border-radius: 5px; }
代碼中的第一個樣式設置了圖片的一些基本樣式,包括邊框、內邊距、背景顏色和陰影等。第二個樣式則是當鼠標懸停在圖片上時施加的樣式,包括增加陰影和指針樣式等。
代碼中最關鍵的部分是第三個樣式,它通過CSS屬性content和attr(title)將圖片的title屬性值顯示為提示文本。這個樣式也指定了一些其他的樣式,包括文本顏色、背景顏色、位置和邊框等。
使用CSS控制圖片title屬性可以讓網站更加美觀和易用,用戶看到提示文本后可以更好地理解圖片的含義,從而提升用戶體驗。