css背景图片，文本样式，_css 背景图影响文本-CSDN博客

本文详细解析了CSS中背景图的设置方法，包括图片的平铺方式、定位及固定，以及如何实现图片渐变和模糊效果。同时，深入探讨了字体样式的调整技巧，如字间距、词间距的控制，以及如何使单行文本在溢出时显示省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**背景-图**：
 background-image:url(路径)
 background-repeat：no-repeat，不平铺 
 background-repeat：repeat，平铺 
 background-repeat：repeat-x，水平平铺 
 background-repeat：repeat-y，垂直平铺
****图片定位(可用于图片整合)****
background-position：x y,(x:水平方向的坐标值，y:垂直位置的坐标值)
背景图固定
background-attachment：scroll/fixed
图片背景根据图片渐变：
 background-image: linear-gradient(-180deg, #ff9b31 21%, #ffb058 9%);
 图片加片模糊效果：（加给img）
 .img{
 	 -webkit-filter: blur(0.50rem); /* Chrome, Opera */
	    -moz-filter: blur(0.50rem);
	     -ms-filter: blur(0.50rem);    
	    filter: blur(0.50rem); 
 }

字体样式：
.p{
letter-spacing：value，			// 字间距
word-spacing:value，				// 词间距，英语单词间距
layout-flow：horizontal(自左向右)/vertical-ideographic(自上至下) // 文本流控制
}

单行文本溢出显示省略号：
.p{
width：100px;
white-space：nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

空余空间：white-space,属性值含义
white-space: normal：默认
white-space: pre:空白会被浏览器保留
white-space:norwarp：不换行
white-space:inherit：从父元素继承(ie不支持)