重学---css背景与精灵图
重学---css背景与精灵图
贵哥的编程之路
发布于 2020-11-03 15:01:04
发布于 2020-11-03 15:01:04
background-color:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 100px;
height: 100px;
}
.box1
{
background-color: red;
}
.box2
{
background-color: rgb(0,255,0);
}
.box3
{
background-color: rgba(0,0,255,0.7);
}
.box4
{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>注意一下,rgba代表了红色 绿色 蓝色 透明哈(0-1),0代表完全透明,1代表原本模样.
效果：
在这里插入图片描述
background-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 500px;
height: 500px;
}
.box1
{
background-image: url(images/girl.jpg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>注意一下： url里面的是相对路径哈.
在这里插入图片描述
background-repeat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div
{
width: 500px;
height: 500px;
}
.box1
{
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>注意一下,: 取值: repeat 默认, 在水平和垂直都需要平铺 no-repeat 在水平和垂直都不需要平铺 repeat-x 只在水平方向平铺 repeat-y 只在垂直方向平铺
效果：
## 效果;
background-position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box1
{
height: 500px;
height: 100vh;
background-image: url(images/yxlm.jpg);
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>注意一下,background-position这个属性分为水平 垂直.
记住，最核心的一点就是背景是在css定义的不是在html定义的啊
效果：
![效果：](https://img-blog.csdnimg.cn/20201030092928735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODA1ODMy,size_16,color_FFFFFF,t_70#pic_cente在这里插入图片描述
background-attachment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
body
{
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div></div>
我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
</body>
</html>注意一下,background-attachment: scroll;是默认的，也就是说屏幕跟文字一起走.
效果：
在这里插入图片描述
背景缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 500px;
height: 500px;
background: red url(images/girl.jpg) no-repeat left bottom;
}
</style>
</head>
<body>
<div></div>
</body>
</html>注意一下**,背景属性缩写的格式 background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;**
效果;
在这里插入图片描述
背景图片和插入图片区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div{
width: 300px;
height: 300px;
background-color: red;
}
.box1{
background-image: url(images/girl.jpg);
background-repeat:no-repeat;
background-position: right bottom;
}
</style>
</head>
<body>
<div class="box1">我是文字</div>
<div class="box2">
<img src="images/girl.jpg" alt="">
我是文字
</div>
</body>
</html>注意一下, 特点：区别： 背景图片仅仅是一个装饰, 不会占用位置 插入图片会占用位置
背景图片有定位属性, 所以可以很方便的控制图片的位置 插入图片没有定位属性, 所有控制图片的位置不太方便
插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
效果：
在这里插入图片描述
css精灵图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>40-CSS精灵图</title>
<style>
.box{
width: 86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>注意一下,精灵图都用负数啊.记住,精灵图主要用的是定位·背景background-position 效果：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录