在Bootstrap中使用text-hide类替换图片

在Bootstrap中使用text-hide类替换图片

Bootstrap允许我们对任何文本元素,如段落元素、标题元素等,用背景图片替换文本。通过使用.text-hide类,我们可以用背景图片替换一个元素的内容。

语法:

<element class = "text-hide" 
         style = "background-image: url('Specify URL of image here');">
</element>

在上面的语法中,text-hide类被用来首先隐藏元素的文本,然后使用CSS的background-image属性为该元素添加背景图像。

示例:

<html>
<head>
    <!-- Link Bootstrap CSS and JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
    <h1 class="text-hide" 
        style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png'); 
               background-repeat: no-repeat; 
               width: 500px; height: 500px; ">
        GeeksforGeeks
    </h1>
</body>
</html>

输出:
在Bootstrap中使用text-hide类替换图片

注意 。该类也有助于提高网站的SEO,因为使用该类,我们可以使用标题标签在网站上添加图片,而使用标题标签被认为对网页的SEO有好处。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程