


Implementation of multiple backgrounds by sharing CSS3 examples (Multiple backgrounds)_CSS/HTML
May 16, 2016 pm 12:03 PMCSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里。
首先我们来看一下语法吧:
background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
多个背景图片的url之间使用逗号隔开即可,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),那么所有背景图片都应用该属性值。
下面我们就看一个例子吧:
这里我们要使用5张图片作为一个div容器的背景,我们来看一下代码:
HTML代码:
CSS代码:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
效果如下图:
![]() |
In the above code there is this sentence:
background-repeat:no-repeat;
Just write a value, the effect is exactly the same.
Of course, when setting the various attributes of the background image above, they are written separately, so we can also write the various attributes of the background image together. In this case, the CSS code is as follows:
.div1{
...
background:url(images/1.jpg) no-repeat top left,
url(images/2.jpg) no-repeat top right,
url(images/3.jpg) no-repeat bottom left ,
. div>
Oh, that’s how CSS3 multiple backgrounds work. It’s very simple. The complete source code and examples are provided below, which can be used as a reference.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to achieve wave effect with pure CSS3? (code example)

Use CSS skillfully to realize various strange-shaped buttons (with code)

How to hide elements in css without taking up space

How to implement lace borders in css3

It turns out that text carousel and image carousel can also be realized using pure CSS!

How to enlarge the image by clicking the mouse in css3

Does css3 animation effect have deformation?
