06-background.html（background相关属性）

最新推荐文章于 2023-12-15 16:23:47 发布

jamesge2010

最新推荐文章于 2023-12-15 16:23:47 发布

阅读量292

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/103104634

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background相关属性</title>
<style type="text/css">
	ul{
		width: 700px;
		margin: 0 auto;
	}
	
	html,body{
		height: 100%;
	}
	
	body{
		background: url("img/baby.jpg") no-repeat;
		/* 固定图片位置不随滚动条移动 */
		background-attachment: fixed;
	}

	ul li{
		/* 行内块元素，元素前后没有换行符。 */
		display: inline-block;
		/* 设置列表项目样式为不使用项目符号 */
		list-style: none;
		width: 100px;
		height: 100px;
		/* 设置内边距 */
		padding: 20px;
		/* rgba是CSS3中的属性，rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。
		范围从0到1，越接近1，代表透明度越低。 */
		border: 20px solid rgba(15, 195, 59, 0.4);
		/* 设置外边距 */
		margin: 10px;
		/* 背景图像将仅显示一次 */
		background: url("img/baby.jpg") no-repeat;
		/* 不会按照原始比例缩放 */
		/* background-size: 100% 100%; */
		/* 按原始比例缩放，显示完整，不铺满容器 */
		/* background-size: contain; */
		/* 按原始比例缩放，显示不完整，但会铺满容器 */
		background-size: cover;
	}
	
	ul li:nth-child(1) {
		/* 背景图像相对于边框盒来定位 */
		background-origin: border-box;
	}
	ul li:nth-child(2) {
		/* 背景图像相对于内边距框来定位（默认） */
		background-origin: padding-box;
	}
	ul li:nth-child(3) {
		/* 背景图像相对于内容框来定位 */
		background-origin: content-box;
	}
	
	ul li:nth-child(4) {
		/* 背景图像相对于边框盒来裁剪（默认）*/
		background-clip: border-box;
	}
	ul li:nth-child(5) {
		/* 背景图像相对于内边距框来裁剪 */
		background-clip: padding-box;
	}
	ul li:nth-child(6) {
		/* 背景图像相对于内容框来裁剪 */
		background-clip: content-box;
	}
	
	ul li:nth-child(7) {
		font-size: 45px;
		color: transparent;
		/* 背景图像相对于文字来裁剪 */
		-webkit-background-clip: text;
	}
	
</style>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li>自学成才</li>
	</ul>
</body>
</html>

jamesge2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-background.html（background相关属性）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>background相关属性</title><style type="text/css"> ul{ width: 700px; margin: 0 auto; } html,...
复制链接

扫一扫

专栏目录