css 背景样式

最新推荐文章于 2024-03-06 20:44:31 发布

潜龙卧湖

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量223

点赞数

文章标签： css 背景样式前端

本文链接：https://blog.csdn.net/weixin_44046450/article/details/94065468

版权

背景样式

width:设置背景的宽度。(411px)
height：设置背景的高度。(221px)
background-color:设置背景的颜色。(#145522)
background-image:设置背景图片的路径（url(…/dhsjd/shdjs.jpg）。
background-repeat:设置背景是否为重复。(repear no-repeat)
background-position:设置背景的定位在哪里?(left right top bottom center ??px),默认时候是left top，在这里方位词是没有顺序的，谁在前面都可以。当有两个值得时候，第一个值代表的是水平，第二个值代表的是垂直方向。当只有一个值得时候，第一个代表的是水平方向，第二个默认为值默认为center。
background-attachment：设置背景是否滚动(scroll fixed)。
background:背景属性简写 #000 url(…/xkcj/sdsd.jpg) no-repeat fixed center -45px;
background:rgba(0,0,0,0.7);背景的颜色和透明度。
background-size:设置图片的大小，50%(将图片设置为原来的一半。)，10px(尽量修改一个值，防止图片扭曲变形。)，cover(会自动调整缩放比例，保证图片始终充满整个盒子)，contain(会自动调整缩放比例，保证图片始终完整在盒子里)。
首先先看一下width、height、background-color、background-image、background-repeat、background-position这几个属性。
代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
		div {
			width: 400px;
			height: 500px;
            margin: 100px auto;
			background-color: hotpink;
			background-image: url(images/yifan1.png);
			background-repeat: no-repeat;
            background-position: center 10px ;
		}
        </style>
    </head>
    <body>
    <div>
    	
    </div>
    </body>
</html>

效果如下：
在这里插入图片描述
background简写和background-attachment属性：
代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		body { 
			background: #000 url(images/yifan2.png)no-repeat fixed center -25px;
		}
		p {
			display: block;
			margin-left: 100px;
			color: #4e4a4a;
			font-size: 30px;
		}
        </style>
    </head>
    <body>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>
		<p>凡凡大小姐</p>

    </body>
</html>

效果如下：
在这里插入图片描述
可以看到滚动条滑动了。背景图片没有滚动。
背景颜色透明：background：rgba(0,0,0,0.7)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			height: 800px;
			background: rgba(0, 0, 0, 0.7);
		}
        </style>
    </head>
    <body>
    <div></div>
    </body>
</html>

效果如下：
在这里插入图片描述 background-size:cover;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
        	background-color: skyblue;
        }
		div {
            margin: 100px auto;
			width: 400px;
			height: 500px;
		 	background: hotpink url(images/yifan1.png) no-repeat;
			background-size: cover; 
		}
        </style>
    </head>
    <body>
    <div></div>
    </body>
</html>

效果如下：
在这里插入图片描述
整个盒子已经给背景所覆盖掉了。
background-size:cover;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
        	background-color: skyblue;
        }
		div {
            margin: 100px auto;
			width: 400px;
			height: 500px;
		 	background: hotpink url(images/yifan1.png) no-repeat;
			background-size: contain;
		}
        </style>
    </head>
    <body>
    <div></div>
    </body>
</html>

效果如下：
在这里插入图片描述这张图与上一张图有明显的差别。

潜龙卧湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 背景样式

背景样式width:设置背景的宽度。(411px)height：设置背景的高度。(221px)background-color:设置背景的颜色。(#145522)background-image:设置背景图片的路径（url(…/dhsjd/shdjs.jpg）。background-repeat:设置背景是否为重复。(repear no-repeat)background-positi...
复制链接

扫一扫