Home Web Front-end CSS Tutorial Implementation of multiple backgrounds by sharing CSS3 examples (Multiple backgrounds)_CSS/HTML

Implementation of multiple backgrounds by sharing CSS3 examples (Multiple backgrounds)_CSS/HTML

May 16, 2016 pm 12:03 PM
css3

CSS3的诞生为我们解决了这一问题,在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;
}

效果如下图:

Implementation of multiple backgrounds by sharing CSS3 examples (Multiple backgrounds)_CSS/HTML

In the above code there is this sentence:

Copy code The code is as follows:

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:

Copy code The 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.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

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

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

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

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

How to hide elements in css without taking up space

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

How to implement lace borders in css3

It turns out that text carousel and image carousel can also be realized using pure CSS! It turns out that text carousel and image carousel can also be realized using pure CSS! Jun 10, 2022 pm 01:00 PM

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

css3 what is adaptive layout css3 what is adaptive layout Jun 02, 2022 pm 12:05 PM

css3 what is adaptive layout

How to enlarge the image by clicking the mouse in css3 How to enlarge the image by clicking the mouse in css3 Apr 25, 2022 pm 04:52 PM

How to enlarge the image by clicking the mouse in css3

Does css3 animation effect have deformation? Does css3 animation effect have deformation? Apr 28, 2022 pm 02:20 PM

Does css3 animation effect have deformation?

See all articles