文本背景列表换图

Posted 2020-06-24 端九九-

word-spacing:单词之间的距离；　letter-spacing：自负之间的距离；　　white-space：no-wrap；同一行显示所有文本|pre保留所有的空格换行符；

 

垂直对齐方式：vertical-align：top、middle、bottom【处理两个元素（文本与图片）对齐时同时使用】

text-transform：字母大小写转换uppercase；lowercase；capitalize第一个字母大写；

text-shadow:水平值 垂直值 模糊半径 颜色；

background-attachment:fixed/scroll背景图片是否滚动；

background:颜色 背景图片 是否平铺 背景图片是否滚动 位置；

list-style-position：inside、outside项目符号在li里面还是外面

outline：1px solid red；也可以定义元素的边框，但是outline设置的像素值已经包含在元素的width值里面

 

换图

1、利用行高【将a标签里面显示的文字给挤出去】

　　<h1 style="height:30px;line-height:150px;overflow:hidden;background:url(logo.png);">

　　　　<a href="#" style="display:block;width:154px;height:30px;"></a>　　

　　</h1>

2、文本缩进

 

<h1 style="text-indent:-200px;overflow:hidden;background:url(logo.png);">

 

　　　<a href="#" style="display:block;width:154px;height:30px;"></a>　　

 

</h1>

3、文字透明

4、定位【但是北京图片不能为png格式，否则会将span下面h1里面的文字给显示出来;当图片出现问题时，h1里面的文字会显示出来】

　<a href="#">

　　<h1 style="position:relative;">

　　　　<span style="position:absolute;height:30px;width:145px;background:url(logo.jpg);"></span>豆瓣

</h1>

</a>