background、overflow、zoom

红的花绿的叶

已于 2024-07-16 10:10:42 修改

阅读量152

点赞数

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

于 2022-12-20 16:29:32 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128386311

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

background

overflow

zoom

background

功能：

背景语法：background:颜色图片平铺方式固定方式位置

背景颜色语法：background-color:blue;

背景图像语法：background-image:url(背景图像的位置及全称)

背景图像的重复方式语法：background-repeat:[repeat、no-repeat、repeat-x、repeat-y]

背景图像的位置语法：background-position:top[left center right]

center[left,center,right]bottom[left,center,right],坐标y坐标[第一个值是水平位置，第二个位置是垂直位置。左上角是0.0.单位是像素（0px 0px）]

背景图像的依附方式语法：background-attachment;[scroll、fixed]

注意：

可以使用background-image:url(); 替代<img>标签

background-attachment;[scroll、fixed]中

scroll是默认属性图片会根据父标签的位置而固定

fixed 图片会根据父标签的位置而滚动

代码示例：

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

	#main{
		width:1000px;
		height:2000px;
		border:1px solid black;
		background-color: yellow;
	}
       #one{
       	   width: 800px;
       	   height:800px;
       	   background-image: url(./image/2.jpeg);
       	   background-repeat: no-repeat;
       	   background-position: 100px 100px;
       	   background-attachment: scroll;
       }
      
	</style>
</head>
<body>
<div id="main">
	<div id="one">
		
	</div>
</div>
</body>
</html>

可以根据css的伪类和background-image:url();做到一个精灵效果

就是鼠标放上去图标换一个样式

两张图片制作出一个效果

代码示例：

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

         body{
         	margin:100px;
         }

         a{
         	display: block;
         	width: 55px;
         	height: 54px;
         	background-image: url(./image/toolbar_cart.png);
         }

         a:hover{
         	background-image: url(./image/toolbar_cart_focus.png);
         }
	</style>
</head>
<body>
	
	<a href="#"></a>
</body>
</html>

overflow

visible[默认值，不剪切内容也不会添加滚动条]

auto[在必需时对象的内容才会被裁剪或者显示滚动条]、

hidden[不显示超过对象的尺寸的内容]

scroll[总是显示滚动条]

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #main{
    	width:1000px;
    	height:1000px;
    	border:1px solid black;
    	background-color: yellow;
    	overflow: scroll;
    }

    #box{
    	width: 500px;
    	height: 500px;
    	background-color: pink;
    }

	</style>
</head>
<body>
	<div id="main">
		<div id="box">
			

		</div>

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

效果图：