网页加载策略与文本显示控制-CSDN博客

本文链接：https://blog.csdn.net/weixin_44368573/article/details/101470025

当网速不够的时候，浏览器就会采用默认的加载策略，也就是去掉网页的css和javaScript.但这个时候仍然需要保证网站的可用性。
要实现当背景图片消失时，如何让文字显示出来，当背景图片在的时候，不要文字。

两种解决方法：目的都是为了使文本不在图片的显示区，然后再使用溢出隐藏
1.使用文本缩进，让文本位于图片后面->不换行->隐藏
html

<body>
	<a href="https://www.taobao.com/" target="_blank">Big girl</a>
</body>

css

a{
	display: inline-block;
	text-decoration: none;
	color:#424242;
	width:400px;
	height:300px;
	background-image:url("../images/02.jpg");
	background-repeat: no-repeat;
	background-size: 400px 300px;
	text-indent: 400px;
	white-space:nowrap;
	overflow: hidden;
}```

重要三件套：
text-indent: 400px;
white-space:nowrap;
overflow: hidden;
2. 图片高度设为0->padding-top的值设为高(图片正常显示，文本在下面)->隐藏

/*重要三件套*/
height:0px;
padding-top:300px;
overflow: hidden;

以图换字的两种方法