background系列使用

最新推荐文章于 2023-11-08 22:52:03 发布

no_name_sky

最新推荐文章于 2023-11-08 22:52:03 发布

阅读量958

点赞数

分类专栏： css 前端 html 文章标签： css

本文链接：https://blog.youkuaiyun.com/no_name_sky/article/details/118095343

版权

前端同时被 3 个专栏收录

12 篇文章

订阅专栏

css

7 篇文章

订阅专栏

html

5 篇文章

订阅专栏

backgroud-image使用

将本地照片传递到background-image属性中，会在div中显示背景照片，如果照片大小和设定的大小不一致，会出现平铺现象。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:1200px;
            width:1500px;
            background-image:url('./dongman.jpg');

        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

样式：
在这里插入图片描述

backgroud-repeat使用

设置平铺的样式。
padding的区域也会被平铺掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:1200px;
            width:1500px;
            background-image:url('./dongman.jpg');
            /*平铺：repeat; 不平铺:no-repeat; repeat-x:x方向平铺; repeat-y:y方向平铺*/
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

样式：
在这里插入图片描述

background-position

对照片位置设定，定位背景图在哪里显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:1200px;
            width:1500px;
            background-image:url('./dongman.jpg');
            background-repeat:no-repeat;
            /* 第一个值是水平方向的偏移，第二个值是垂直方向的偏移，两者均可设置负值*/
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
<div>
动漫照片
</div>
</body>
</html>

样式：
在这里插入图片描述
主要用来定位切图，css精灵图，将小图标和背景图合并到一张图片中。
在网站中经常有很多小图标，每次访问网站加载小图标都要向服务器发送很多图片获取请求，会造成服务器负担，css精灵图就是将多个小图标合并到一个图片中，只需要向服务器获取一次图片请求就可以拿到所有到小图标的合集。切图就是利用position定位拿到指定位置的小图标。

除了使用数字，position还允许设置：水平方向(left center right)，垂直方向(top center bottom)

左下显示
background-position: left bottom;

英文的使用场景：当提供的照片宽度远大于浏览器的宽度时，显示的是部分的背景照片，只有当浏览器宽度和背景照片一样时，才会显示全部照片。设置水平居中通天banner：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			background-image:url(./banner.png);
			background-repeat:no-repeat;
			/*水平居中的通天banner图*/
			background-position: center top;
		}
	</style>
</head>
<body>
<div>
	123
</div>
</body>
</html>

background-attachment

固定背景，在滑动的时候页面背景位置不变，内容变化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:1000px;
			height:2000px;
			border: 1px solid red;
			background-image:url(./banner.png);
			background-repeat:no-repeat;
			background-position: center top;
			background-attachment:fixed;
		}
		p{
			height:30px;
		}
	</style>
</head>
<body>
<div>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
</div>
</body>
</html>

在这里插入图片描述