大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何使用CSS3中background-image实现多背景图片?针对这个问题,今天小编总结了这篇文章,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。
成都创新互联长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为黄冈企业提供专业的成都做网站、成都网站建设,黄冈网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。1、实现以下效果,使用纯DIV+CSS,必须使用background-image
附加说明:
1、整体宽度是1000px,高300px,要求页面居中显示
2、背景图片宽,高均为300px
3、每张图片都是当做背景图片来呈现的
1、准备素材:根目录创建images文件夹,把相关素材图片都存放与此,素材有
2、创建好index.html,写好架构,架构如何分析呢
思路分析:
1、目标由3个div组成,每个div的背景图片都是一样的,都是3张照片,只不过仔细观察,就是第二张背景图片的位置显示不同
2、每个div都带有一个标题
根据分析,我们得出以下代码
多重背景 效果1
效果2
效果3
3、写样式 ,创建css文件夹,里面新建index.css,里面的样式怎么写了,以下是分析思路
思路分析:
1、.container *
思路分析
1、为了设置容器里的所有元素的公共样式,我们可以将这些公共代码写入.container * 样式内
所以index.css中添加代码如下:
.container *{ padding:0; margin:0; }
2、h5标题
思路分析:
1、要求文本居中,所以转成代码即 text-align: center;、
所以index.css中添加代码如下:
h5{ text-align: center; }
3、.demo
思路分析:
1、根据要求得知宽1000,高300,所以转成代码即width:1000px;height:300px;背景图片不是一张是3张,且不重复所以
background-image: url(images/gtl1.jpg),
url(images/gtl2.jpg),
url(images/gtl3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
带边框所以border: 1px solid #999;要居中且有上边距所以margin: 0 auto 20px auto;
所以index.css中添加代码如下:
.demo { width: 1000px; height: 300px; border: 1px solid #999; background-image: url(images/gtl1.jpg), url(images/gtl2.jpg), url(images/gtl3.jpg); background-repeat: no-repeat, no-repeat, no-repeat; margin: 0 auto 20px auto; }
4、3种不同的背景位置设置
思路分析:
1、第一种方式是第一张背景图片靠最左边显示,第二张居中,此刻它的left值=(1000-300)/2=350,第三张在最右边
2、第二种方式是第一张背景图片靠最左边显示,第二张紧挨着第一张,此刻它的left值=第一张背景图片的宽度300,第三张在最右边
3、第三种方式是第一张背景图片靠最左边显示,第二张紧挨着第三张,此刻它的left值=1000-第二张+第三张的总体宽度=1000-600=400,第三张在最右边
注意:如果都不设置background-positon默认都是靠左显示,那么会存在重叠的情况
所以index.css中添加代码如下:
.bg1 { background-position: left top, 350px 0, 700px 0; } .bg2 { background-position: left top, 300px 0, 700px 0; } .bg3 { background-position: left top, 400px 0, 700px 0; }
到此为止,index.css的全部内容如下:
.container *{ padding:0; margin:0; } h5{ text-align: center; } .demo { width: 1000px; height: 300px; border: 1px solid #999; background-image: url(../images/gtl1.jpg), url(../images/gtl2.jpg), url(../images/gtl3.jpg); background-repeat: no-repeat, no-repeat, no-repeat; margin: 0 auto 20px auto; } .bg1 { background-position: left top, 350px 0, 700px 0; } .bg2 { background-position: left top, 300px 0, 700px 0; } .bg3 { background-position: left top, 400px 0, 700px 0; }
然后将index.css引入index.html中
多重背景 效果1
效果2
效果3
运行效果如下
到此为止,我们就实现了全部的需求
1、background-image可以设置多背景图片,语法格式如下:
background-image: url(图片地址1),
url(图片地址2),
url(图片地址3).......还可以N个;
2、如果设置了多背景图片,那么在设置 background-repeat和 background-position的时候要注意顺序和图片设置的顺序一样,如果设置成一个,那么说明所有的背景图片都是一样的设置
看完这篇文章,你们学会使用CSS3中background-image实现多背景图片的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。