前端——css 背景background
文章目录
小练习美化a超链接
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*去掉ul默认样式*/
ul{
list-style: none;
}
.nav{
width: 960px;
margin: 100px auto 0;
background-color: royalblue;
overflow: hidden;
/*圆角设置*/
border-radius: 3px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
/*行高等于盒子高度，单行垂直居中*/
line-height: 40px;
/*a标签并不继承 父元素color*/
/*color:white;*/
}
.nav ul li a{
/*一定要给a标签一个宽度高度，鼠标在a区域会显示小手状态*/
display: block;
width: 160px;
height:40px;
color:white;
text-align: center;
text-decoration: none;
}
/*设置一些特性*/
.nav ul li a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">导航</a>
</li>
<li>
<a href="">导航</a>
</li>
<li>
<a href="">导航</a>
</li>
<li>
<a href="">导航</a>
</li>
<li>
<a href="">导航</a>
</li>
<li>
<a href="">导航</a>
</li>
</ul>
</div>
颜色
/* 颜色表示方法有哪些？
一共有三种：单词、rgb表示法、十六进制表示法
rgb:红色 绿色 蓝色 三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值是255，是纯色：
黑色：rgb(0,0,0);
白色： rgb(255,255,255);
黄色: rgb(255,255,0);
16进制表示法
所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;
等价于
background-color:#f00;
比如：
background-color:#112233;
等价于
background-color:#123;
只能上面的方法简化，比如
background-color:#222333;
无法简化！
再比如
background-color:#123123;
无法简化！
要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
背景图 background-image
<style type="text/css">
div{
width: 500px;
height: 800px;
border: 3px solid red;
/*背景图平铺 padding区域也会填充*/
background-image: url("1_light__1024.ico");
/*不平铺*/
background-repeat: no-repeat;
/*单一方向平铺*/
background-repeat: repeat-x;
background-repeat: repeat-y;
}
</style>
body{
background-image: url("1_light__1024.ico");
}
背景图定位 background-position
div{
width: 500px;
height: 500px;
background-image: url(1_light__1024.ico);
background-repeat: no-repeat;
/*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反,文字没动，背景偏移*/
background-position: -100px -100px;
/*水平方向 left center right
垂直方向 top center bottom
*/
background-position:right bottom;
}
用background-position做css sprite
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术,主要用在小图标显示上，是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分，为了减少http请求数量,加速网页内容显示。
用position调整背景图
body{
background-image: url("xmad_15489036270154_UEsce.jpg");
背景图显示不完整，调整背景图，让图水平居中，垂直靠顶。
body{
background-image: url("xmad_15489036270154_UEsce.jpg");
background-repeat: no-repeat;
/*水平居中banner图*/
background-position: center top;
/*水平居中banner图 也可以用百分比，（宽度减去图片宽度）的百分比*/
background-position: 50% 0;
/*!*综合属性设置*!*/
background: red url('xmad_15489036270154_UEsce.jpg') no-repeat center top;
}
固定背景图background-attachment
固定 背景,滚动条滚动时，背景一直在屏幕上不动
background-attachment: fixed;
综合写法：
background: url(1_light__1024.ico) no-repeat 0 0 fixed;
改之前：
改之后：文字掠过背景，背景始终在屏幕上