前端开发--css--background属性--练习题

最新推荐文章于 2023-01-02 20:00:00 发布

小哦--

最新推荐文章于 2023-01-02 20:00:00 发布

阅读量403

点赞数

分类专栏： html +css +javascript

本文链接：https://blog.csdn.net/sundanping_123/article/details/95217446

版权

html +css +javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

雪碧图背景列表练习：
在这里插入图片描述

图片素材是我从网上找的，自已调整了大小和样式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background</title>
	<style type="text/css">

		.list{
			list-style: none;
			width: 300px;
			height: 305px;
			margin: 50px auto 0;
			/*background-color: pink;*/
			padding: 0;
		}

		.list li{
			height: 60px;
			border-bottom: 1px dotted black;
			line-height: 60px;
			text-indent: 60px;
			background: url(images/bg01.jpg)  -3px  4px  no-repeat;
		}

		.list  .con02{
			background-position: 1px  -53px;
		}

		.list  .con03{
			background-position: 1px -110px;
		}

		.list  .con04{
			background-position: 1px -170px;
		}

		.list  .con05{
			background-position: 1px -231px;
		}


	</style>
</head>
<body>
	<!--  ul.list>li{美人鱼}*5   -->

	<ul class="list">
			<li>美人鱼</li>
			<li class='con02'>疯狂动物城</li>
			<li class='con03'>魔兽</li>
			<li class='con04'>美国队长3：英雄内战</li>
			<li class='con05'>湄公河行动</li>
		</ul>	
</body>
</html>

在这里插入图片描述
网页文字滑动，但是背景图固定不动，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background</title>
	<style type="text/css">

		body{
			background: url(images/4.jpg)  fixed;
		}

		p{
			text-align: center;
			font-size: 30px;
		}

	</style>
</head>
<body>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>
	<p>网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字网页文字</p>
	<br><br><br><br><br><br><br>

</body>
</html>

在这里插入图片描述