背景

最新推荐文章于 2022-10-30 18:01:18 发布

黄晶谛

最新推荐文章于 2022-10-30 18:01:18 发布

阅读量111

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/114156745

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、背景设置基础

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		div {
				width: 400px;
				height: 500px;
				background-color: purple;
				background-image: url(btn.png);
				background-repeat: no-repeat;不平铺
				background-position: x y; top bottom left right center
				background-position: center center;
				/* background-position ：
					1、后可跟方位名词，没有先后顺序；
					2、如果只写一个方位名词，另一个默认值是居中center；
					3、后也可跟 值px;但是必须有顺序，即第一个参数是x，第二个参数是y */
				background-position: bottom;
				background-position: left;
				background-position: 12px 50px;
				background-position: 50px 12px;
				background-position: 10px center;
				background-attachment: fixed;		
			 /* background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 */
			 /* background: #000 url(btn.png) no-repeat fixed center top; */
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

二、背景半透明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: pink;
		}

		div {
			width: 200px;
			height: 200px;
			/* background-color: #000; */
			color: #fff;
			background-color: rgba(0,0,0,0.3);/* red green blue alpha(透明度) */
		}
	</style>
</head>
<body>
	<div>文字内容</div>
</body>
</html>

黄晶谛

关注

0
点赞
踩
0

收藏

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

一、背景设置基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> div { width: 400px; height: 500px; background-color: purple; background-image:
复制链接

扫一扫

专栏目录