CSS圖片上面新增文字說明

admin發表於2018-09-05
CSS

網站搭配圖片可以有效的提高美觀度，那麼更有可能獲得瀏覽者的垂青。

通常都會以某種形式為圖片新增一些文字說明，最為常見的形式之一在圖片之上新增文字。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.thediv{
  width:400px;
  height:200px;
  position:relative;
}
img{
  width:400px;
  height:200px;
}
.thediv span{
  width:400px;
  height:50px;
  display:block;
  text-align:center;
  line-height:50px;
  background-color:#333;
  opacity:0.5;
  position:absolute;
  top:100px;
  color:red;
}
</style>
</head>
<body>
<div class="thediv">
  <img src="mytest/demo/tree.jpg"/>
  <span>螞蟻部落歡迎您</span>
</div>
</body>
</html>

上面程式碼實現了，文字懸浮於圖片之上的效果，下面簡單介紹一下它的實現原理。

圖片位於div元素中，然後再為div新增一個span元素，此元素就是文字的容器。

為了讓文字位於圖片之上，將span元素設定為絕對定位，它的定位參考元素就是div父元素。

關於定位可以參閱如下兩篇文章：

（1）.CSS position:relative 相對定位一章節。

（2）.CSS position:absolute 絕對定位一章節。

為儘量避免影響對圖片的瀏覽，span元素通常設定一定的透明度，上述程式碼也採用了上述措施。

然而效果並不完美，因為不但span元素具有透明度，文字也具有了透明度。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.thediv{
  width:400px;
  height:200px;
  position:relative;
}
img{
  width:400px;
  height:200px;
}
.thediv span{
  width:400px;
  height:50px;
  display:block;
  text-align:center;
  line-height:50px;
  position:absolute;
  top:100px;
}
.content{
  background-color:#333;
  opacity:0.5;
}
.text{
  color:red;
  z-index:100;
}
</style>
</head>
<body>
<div class="thediv">
  <img src="mytest/demo/tree.jpg"/>
  <span class="content"></span>
  <span class="text">螞蟻部落歡迎您</span>
</div>
</body>
</html>

上面程式碼修復了第一段程式碼的問題，併相容所有主流瀏覽器。

第一段程式碼之所以會導致文字透明，因為opacity屬性具有繼承性，它的子元素會繼承此屬性。

為了避免此情況，再新增一個span元素，它專門用來存放文字，然後將元素定位於設定透明的span元素之上。

不考慮低版本IE瀏覽器：

CSS中很多問題都是低版本IE瀏覽器導致的。

如果不考慮低版本IE瀏覽器，可以非常輕鬆實現相同的效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.thediv{
  width:400px;
  height:200px;
  position:relative;
}
img{
  width:400px;
  height:200px;
}
.thediv span{
  width:400px;
  height:50px;
  display:block;
  text-align:center;
  line-height:50px;
  background-color:rgba(51,51,51,0.5);
  position:absolute;
  top:100px;
  color:red;
}
  
</style>
</head>
<body>
<div class="thediv">
  <img src="mytest/demo/tree.jpg"/>
  <span>螞蟻部落歡迎您</span>
</div>
</body>
</html>

上面程式碼設定背景顏色通過RGBA方式，最後的A是用來設定透明度。

這樣背景具有透明度，但是上面的文字不會具有透明度。

CSS3顏色表示法更多內容可以參閱CSS 顏色表示法一章節。

相關文章