css背景图替代文字 - 如何让css无法加载时页面功能依然不受影响

最新推荐文章于 2021-08-04 10:19:40 发布

Nemo.1213

最新推荐文章于 2021-08-04 10:19:40 发布

阅读量238

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45763491/article/details/107750442

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法一：利用text-indent将文字移出盒子，然后让换行文字不换行，这样，当css无法加载时，虽然背景图无法显示，但是文字也不会被移出盒子，这样文字显示在用户的视野里了

代码：

<!DOCTYPE html>
<html>
<head>
	<title>图片替代文本</title>
	<style type="text/css">
		div{
			width: 213px;
			height: 73px;
			background: url(imgs/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat;
			/*让文字超出容器*/
			text-indent: 100em;
			/****禁止文字换行****/
			white-space: nowrap;
		}	

	</style>
</head>
<body>
	<a href="#"><div>淘宝</div></a>
</body>
</html>

css可以加载出来时的效果图：

css无法加载出来时的效果图：

方法二：利用盒子的padding特性：可以显示背景图，但是不能显示内容

步骤：把盒子的高写成0，padding-top写成盒子背景需要的高度来显示背景，这样文字就显示在盒子外面了，再用overflow:hidden隐藏掉文字

代码：

<!DOCTYPE html>
<html>
<head>
	<title>图片替代文本</title>
	<style type="text/css">
		div{
            background: url(imgs/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat;
			width: 213px;
            /**盒子的高设为0**/
			height: 0px;
            /**利用padding显示背景图**/
			padding-top: 73px;
            /**隐藏盒子外的文本**/
			overflow: hidden;
		}	

	</style>
</head>
<body>
	<a href="#"><div>淘宝</div></a>
</body>
</html>

效果图同方法一。

Nemo.1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css背景图替代文字 - 如何让css无法加载时页面功能依然不受影响

<!DOCTYPE html><html><head> <title>图片替代文本</title> <style type="text/css"> div{ width: 213px; height: 73px; background: url(imgs/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat; /*让文字超出容器*/ text-in.
复制链接

扫一扫