文字溢出，背景图片处理，项目演练

最新推荐文章于 2024-07-18 17:34:14 发布

Hermioneee_

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量105

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_36936831/article/details/107145355

版权

文字溢出，背景图片处理，项目演练

文字溢出

单行文本溢出的三件套

   overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

多行文本溢出做截段

 overflow: hidden;

背景图片处理

背景图片填充
HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div></div>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    color: #424242;
    font-family: arial;
}
div{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-image: url(1.PNG);/*可当作背景图片，url是背景图片地址*/
    background-size: 200px 200px;/*设置背景大小*/
    background-repeat: no-repeat;/*不重复平铺*/
    background-position: 100px 100px;/*按坐标出现在某个区域*/
}

当CSS失效解决图片链接不能用的问题：
HTML:

<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    color: #424242;
    font-family: arial;
}
a{
    display: inline-block;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 190px 90px;
    color: #424242;
    height: 90px;
    width: 190px;
    border:1px solid black;
    background-image: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    text-indent: 190px;		 /*把文字缩进出去*/
    white-space: nowrap;	 /*文字不换行*/
}

在这里插入图片描述
padding部分也可以加背景图片
p标签里不能套块级元素

留白区域的结构：
HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="wrapper">
		<div class="content"></div>
	</div>
</body>		       
</html>

CSS:

 *{
    margin: 0;
    padding: 0;

}
.wrapper{
    height: 30px;
    background-color: #123;

}
.content{
    margin: 0 auto;   /*auto自适应*/
    width: 800px;
    height: 30px;
    background-color: #0f0;
}