首頁  >  文章  >  web前端  >  如何使用HTML和CSS在影像上新增文字? (程式碼範例)

如何使用HTML和CSS在影像上新增文字? (程式碼範例)

不言
不言原創
2018-11-08 14:51:2926945瀏覽

本篇文章我們將向您介紹如何使用 HTML和CSS在圖像上新增文字,內容很詳細。

話不多說,我們直接進入正題~

1、用HTML和CSS表達的好處

不是「圖像本身寫入文字”,而是“透過HTML和CSS在圖像上配置文字”這一點有以下的好處。 (推薦教學:CSS影片教學

即使放大,字元也不會模糊

它也在搜尋引擎中閱讀(適用於SEO)

你可以選擇字母

響應式設計允許您調整字體大小(您可以執行類似智慧型手機顯示器中的小寫字母...)

2、如何在在圖像上放置文字

第一步:我們需要準備一個圖像

作為一個例子,我想在深色背景的背景上放置白色文字。

第二步:將圖像和字母放在一個div元素中

將圖像和字母放在一個div標籤中。在範例中,將文字「萬裡長城」放在p標記中。當然您可以使用標題標籤而不是p標籤,也可以使用span標籤。

<div class = "example" >  
<img  src="image/greatwall.jpg" alt="如何使用HTML和CSS在影像上新增文字? (程式碼範例)" > 
<p>万里长城</p>
</div>

第三個步驟:指定position屬性

為每個元素設定css的position屬性。

對作為父元素的div指定為position:relative,以及對包含該字串的p標籤設定為absolute。 img標籤不動。

把p標籤的位置設定為top:0; left:0。

為了把影像放在橫向上,請指定為img標籤的寬度為width : 100%。

.example{/*父元素div*/
  position: relative;/*相対定位*/
  }
.example p {
    position: absolute;/*絶対定位*/
  color: white;/*文字设为白色*/
  top: 0;  
  left: 0;
  }
.example img {  
  width: 100%;
  }

效果如下:

如何使用HTML和CSS在影像上新增文字? (程式碼範例)

文字出現在圖片的左上角。 position:absolute父元素將決定相對於父元素的位置。 top:0; left:0表示「圖像將放置在父級(div)的左上角」。

第四步:調整文字樣式

我們現在來調整一下字體的樣式,試著放大字體和加粗。另外,為了展現好看的效果也來改變一下字體的種類。

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
    top: 0;  
    left: 0;
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;   
}
.example img{width: 100%;}

效果如下:

如何使用HTML和CSS在影像上新增文字? (程式碼範例)

這就完成了,說明一下:如果想把圖像的尺寸固定為某一個像素的時候,請按照width : 100%的情況,對父元素的div指定width為某一個固定像素。

3、把文字放在圖像中間

在某些情況下,我想把“文字放在圖像的中心”,這時,CSS代碼應如下圖所示。

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
   /* top: 0;  
    left: 0;*/
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
    
}
.example img{width: 100%;}

效果如下:

如何使用HTML和CSS在影像上新增文字? (程式碼範例)

我們對上述居中來說明一下

top和left為50%

這是基本上放在中間的。但是,這樣的話就偏離了文字的大小。

調整文字部分的錯誤

在那裡使用transform: translate修正了文字的差異。在translate(-50%,-50%)中,垂直和橫向的文字的差異被修正。 ttransform是CS3的屬性,但除了IE8之外還對應其他瀏覽器。

為了與舊瀏覽器對應,也寫有供應商前綴(- ms 和- wabkit-)編寫翻譯。

如果加入了magin和padding還有空白的話,則可能會偏離中心。因此,為了謹慎起見,以我們把它值變為0。

4 、在圖像中顯示帶有背景顏色的類別名稱

下面介紹一下在圖像上顯示帶有背景顏色的文字的方法。

請看以下CSS程式碼,HTML與上面相同

.example {
  position: relative;
  }
.example p {
  position: absolute;  
  top: 0;
  left: 0;
  margin: 0; 
  color: white;
  background: lightblue;
  font-size: 15px;  
  line-height: 1;
  padding: 5px 10px;
  }
.example img {
  width: 100%;
  }

效果如下:

如何使用HTML和CSS在影像上新增文字? (程式碼範例)

當標籤附著在圖片的角落時,字元被固定。在這種情況下,無論影像的亮度如何,您都可以清楚地看到。同樣,如果要更改圖像的大小,width我們建議為父元素的div來指定它。

以上是如何使用HTML和CSS在影像上新增文字? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn