衡水哪儿做网站便宜/刷排名的软件是什么
提到CSS,颜色的设置大家经常都会为了设置合适的颜色属性,而煞费苦心,今天总结一下CSS颜色的设置,以及怎么快速提取出想要的颜色
1.CSS中的颜色表示法
1.单词表示法
background color:背景颜色 red blue green…
2.16进制表示法
#000000–#FFFFFF
3.RGB三原色表示法
rgb(255,255,255);
取值范围0-255
红绿蓝三原色法
那么我们已经有了颜色属性的设置方法了,怎么获取得到理想中的颜色呢?
获取网页颜色的方法:
1.下载FE助手插件,提取网页中颜色会返回16进制表示法,并且可以直接复制得出16进制数据
2.PS软件 截图-在PS中打开-吸管工具,不仅可以得到16进制颜色,还可以得到对于的RPG值
例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{width: 100px;height: 100px;background-color: red;}
</style>
<body><div>这是一个块</div><div style="width: 200px;height: 150px;background-color: #00000F;">这也是一个块</div>
</body>
</html>
2.CSS中的背景样式
background-color:背景颜色
background-image: 背景图片 url(背景地址),默认会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式 repeat-x x轴线平铺 repeat-y repeat(x,y)(X,y 都进行平铺。默认值) no-repeat 都不平铺
background-position: 背景图片的位置 :X y 移动(默认在左上角)
可以使用数字的样式:
background-position: 100px 50px;
也可以使用单词的样式
x:left,center,right
y: top,center,bottom
background-position: right bottom;
也可以按照百分比的样式
background-attachment:背景图随滚动条的移动方式
scroll : 默认值 图片随浏览器移动而移动(背景位置是按照当前元素进行移动的)
fixed : 图片固定,不随滚动条移动(背景位置是按照浏览器进行偏移的)
例:
body{height: 5000px;}div{width: 1000px;height: 1000px;background-color: red;background-image: url(../img/1.jpg);background-repeat: no-repeat;background-position: right bottom;background-attachment: scroll;}
视觉差的实现:
利用:background-attachment:背景图随滚动条的移动方式
fixed : 图片固定,不随滚动条移动(背景位置是按照浏览器进行偏移的)
例:
<style>#div1{width: 1400px;height: 800px;background-image: url(../img/0.jpg);background-attachment: fixed;}#div2{width: 1400px;height: 800px;background-image: url(../img/5.jpg);background-attachment: fixed;}#div3{width: 1400px;height: 800px;background-image: url(../img/6.jpg);background-attachment: fixed;}