传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 设置多个背景图片

2017-11-5 22:44| 发布者: admin| 查看: 1028| 评论: 0|来自: 蚂蚁部落

传智播客

本章节介绍一下利用CSS3为同一个元素设置不同的背景图片,之前实现此效果相对繁琐。

首先看一下CSS2有哪些属性可以设置元素背景。

列表如下:

[CSS] 纯文本查看 复制代码
background-color: color值 || RGBA值;
background-image: url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: <length> || <per>

为了更为清晰,将background的各个属性单独写出来,当然也可以合并。

CSS3添加或者增强了若干属性,列表如下:

[CSS] 纯文本查看 复制代码
background-image: url();
background-position: <length> || <per>;
background-size: <length> || <per>;
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;
background-color: color值 || RGBA值;

上面属性有的是CSS3新增,有的在CSS3中得到增强,最后面的实例代码会有体现。

语法结构如下:

[CSS] 纯文本查看 复制代码
background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color

特别说明:

如果采用合并的写法,background-size属性需要跟在background-position属性的后面,之间要用斜杠"/"分隔,考虑到当前浏览器存在兼容问题,推荐分开写,因为可能需要在属性前面添加浏览器厂商前缀,例如:

[CSS] 纯文本查看 复制代码
-moz-background-origin

如何设置多背景图片:

上面介绍了background有哪些属性,下面就介绍一下如何给一个元素设置多个背景图片。

CSS3中,不需使用任何其他特别的属性,就可以给同一元素设置除background-color以外其他多个背景属性,也就是说除了背景色以外,其他任何背景属性都可以给同一元素设置多个。

语法结构如下:

[CSS] 纯文本查看 复制代码
background :[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*

上面是合成的写法,当然也可以分开,当前推荐分开写:

[CSS] 纯文本查看 复制代码
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;

代码实例如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/02/224708av288rro8f8hkzkv.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果有上面图片类似的要求(将四个图片分别放置于元素的四角),使用CSS2,可以使用如下代码:

[HTML] 纯文本查看 复制代码运行代码
<div class="box">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="content">蚂蚁部落</div>
  <div class="bottom-left"></div>
  <div class="bottom-right"></div>
</div>

上面只演示HTML结构,将四角的小图作为四个div的背景图,然后使用定位将其放置于响应位置,比较繁琐;使用CSS3多背景图方式则更为简单,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.bg{
  width:215px;
  height:165px;
  background-attachment:scroll,scroll,scroll,scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url(mytest/demo/top-left.jpg),
  url(mytest/demo/top-right.jpg),
  url(mytest/demo/bottom-left.jpg),
  url(mytest/demo/bottom-right.jpg);
  background-origin: border, border, border, border;
  background-origin:border-box, border-box, border-box, border-box;
  background-position:left top, right top, left bottom, right bottom;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:auto auto, auto auto, auto auto, auto auto;
   
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

以上代码实现了我们的要求,只需要一个标签就可以实现多个背景图效果。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 word-break下一篇:@font-face的用法

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:13 , Processed in 0.066637 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部