CSS實現隱藏正常顯示的文本，並用圖片替換

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

效果與目的：

利用CSS，將HTML正常顯示的文本隱藏起來，並用一個圖片代替。使得任何使用者瀏覽器只要支援CSS，就會看到替換後的圖片，而不支援CSS的使用者瀏覽器只會看到普通文本。

HTML代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="css.css" type=text/css rel=stylesheet><TITLE>CSS實現隱藏正常顯示的文本，用圖片代替</TITLE></HEAD><BODY><h1><!-- ** 在h1內部添加span元素，並通過CSS應用背景圖片來覆蓋HTML文本**span元素的CSS設定見css代碼--><span></span>Going to the snow!</h1><p>Going to the snow主題相關文本段落01</p><p>Going to the snow主題相關文本段落02</p><p>Going to the snow主題相關文本段落03</p></BODY></HTML>

CSS代碼：

/* 常見元素的周邊屬性margin和padding省缺時，預設設為0 */body, dd, dl, dt, embed, fieldset, form, h1, h2, h3, h4, h5, h6, img, li, object, ol, p, ul {margin: 0;border: 0 none #FFF;padding: 0;}body {padding: 20px;/* 內邊距屬性設定 */background-color: #DDEEFF;/* BODY的背景顏色 */background-image: url(images/body_bg.jpg);/* BODY的背景圖片 */background-repeat: repeat-x;/* 背景圖片圖片的平鋪模式：水平方向重複 */color: #000;/* 規定文本的顏色。 */font-size: 75%;/* 字型大小設定為基於父元素的一個百分比值。 */line-height: 1.4em;/* 設定行間距離（行高） */font-family: Arial, Helvetica, sans-serif;/* 規定元素的字型系列，字型選擇優先順序別從左往右 */}h1 {/*h1的位置是相對位置。如果父元素具有相對位子，/*那麼，對於它內部的任何具有據對位置的元素，它們的原點座標都是基於具有相對位置的父元素/*所以接下來設定h1內的span的left座標和top座標為0，意味著就在h1內部的左上方*/position: relative;width: 389px;height: 43px;overflow: hidden;/*overflow 屬性規定當內容溢出元素框時發生的事情，屬性值為hidden表示溢出內容會被修剪，並且不可見 */font-size: 175%;line-height: 43px;text-transform: uppercase;/*text-transform 屬性控制文本的大小寫，屬性值為uppercase表示僅有大寫字母。 */}h1 span {position: absolute;left: 0;top: 0;z-index: 10;/*z-index 屬性設定元素的堆疊順序，其值可正可負正數，為正數則離使用者更近，為負數則表示離使用者更遠*/width: 100%;/*width和height屬性設定為100%可自動擴充到與父元素h1同樣的大小*/height: 100%;background-image: url(images/title_snow.gif);/* span元素的背景圖片 */background-repeat: no-repeat; /* 背景圖片圖片的平鋪模式：僅顯示一次 */}p {width: 40em;margin-top: 1.5em;/* margin-top 屬性設定元素的上外邊距 */}

瀏覽：

1、使用Firefox瀏覽器並且支援圖片顯示功能時的瀏覽圖

2、使用Firefox瀏覽器但關閉圖片顯示功能時的瀏覽圖

附件：頁面中的兩張背景圖片

span元素背景圖片：

h1元素背景圖片：

參考：《The Art & Science of CSS》

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More