文本超出处理、背景透明-文字不透明、图片适应处理

heroboyluck

于 2019-07-11 22:56:12 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： css 问题小集文章标签：文本超出省略显示... 背景透明-文字不透明图片自适应处理

本文链接：https://blog.youkuaiyun.com/heroboyluck/article/details/85220225

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

问题小集

8 篇文章

订阅专栏

博客介绍了文本、背景、图片处理及按钮事件设置相关内容。包括文本超出省略显示的基本要素，背景透明但文字不透明的设置，图片自适应父元素的不同方式，如控制宽高、铺满拉伸或等比例缩放，还提到若用单张图做背景效果及禁止按钮事件。

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

文本超出省略，显示...
基本要素，有固定的宽度，文本会超出；设置文本超出后不换行；

.box{
	width:100px;
  	height:30px;
  	background:#000;
  	color:#fff;
  	line-height:30px;
	}
.box p{	
	white-space:nowrap;          // 或 white-space:pre;
	overflow:hidden;
	text-overflow:ellipsis;
}

背景透明，文本不透明。
基本要素，元素的背景色设置使用RGBA
```
p{
	background-color:rgba(255,255,255,0);
}
```
图片自适应父元素
可使用max-*控制宽度、高度。
1. 铺满整个父元素,图片会被拉伸、变形。
```
img{
	width:100%;
	height:100%;
}
```
2. 等比例缩放、不超出父元素。
```
img{
	max-width:100%;
	max-height:100%;
}
```
3. 如果仅仅一张图做个背景效果。
```
	.img-box{
	  background-image:url('./*.jpg');
	  background-size:contain;
	  background-repeat:no-repeat;
	}
```
禁止掉按钮的事件
```
 cursor:not-allowed;
```