成都网站建设设计

将想法与焦点和您一起共享

CSS背景的相关操作介绍

这篇文章主要讲解了“CSS背景的相关操作介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS背景的相关操作介绍”吧!

创新互联公司是一家集网站建设,宁陵企业网站建设,宁陵品牌网站建设,网站定制,宁陵网站建设报价,网络营销,网络优化,宁陵网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

####背景颜色
background-color

background-color: red;background-color: rgb(88,88,88);

####背景图片

background-image: url("show.jpeg");

####背景平铺
图片不平铺

background-repeat: no-repeat;

####背景是否滚动
可选值 scroll fixed

background-attachment: fixed;

背景颜色
background-color: red;

颜色可以设置成十六进制 或者 rgb 或者 rgba
1.5.2. 背景图片

background-image: url(图片路径);

1.5.3. 背景平铺

background-repeat: 背景平铺;1.repeat 平铺  默认的2.no-repeat 不平铺3.repeat-x 水平平铺4.repeat-y 垂直平铺1.5.4. 背景是否滚动

background-attachment: 背景是否滚动;

1.scroll  默认值 图片跟随盒子一起滚动2.fixed      图片不跟随盒子一起滚动

1.5.5. 背景位置

1.方位名词 right top left center bottom 书写的顺序不论
2.像素 如果是像素 那么默认在以“当前盒子”的左上角为0 0原点 构建一个坐标系 第一值是X轴的位置 第二个值是Y轴的位置 交互的点就是图片开始显示的起始位置
多说一嘴:
1、程序里面的坐标系X轴水平向右  Y轴垂直向下
2、注意顺序
3.百分比  百分比参照的自身盒子的宽高: 最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比
4.还可以混写 混写是需要考虑顺序
####背景的简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

####img和背景图片的区别:
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的 需要专门写宽高
一般产品插入图都推荐使用img  而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)

感谢各位的阅读,以上就是“CSS背景的相关操作介绍”的内容了,经过本文的学习后,相信大家对CSS背景的相关操作介绍这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前标题:CSS背景的相关操作介绍
路径分享:http://chengdu.cdxwcx.cn/article/jhihjj.html