Layered Backgrounds in IE8_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-11 13:14 出处：网络

background-image: url(\'/i开发者_JS百科mages/tenticles.png\'), url(\'/images/header.png\'); I have the above code, which works in both Firefox and Chrome. However it does not work in IE8. I was wond

background-image: url('/i开发者_JS百科mages/tenticles.png'), url('/images/header.png');

I have the above code, which works in both Firefox and Chrome. However it does not work in IE8. I was wondering if there was a way around this not working. Something similar to HTML5shiv.

There are multiple workarounds for IE's lack of multiple background support. One such technique involves simply creating a div that spans the entire page, and setting its background along with the background of the body element. This technique can be repeated as necessary. For example:

body { background-url('/images/tenticles.png'); }
#background1 { background-url('/images/header.png'); }

<body>
    <div id="background1">
    </div>
</body>

However, it looks like you want something along the lines of CSS3 PIE (Progressive Internet Explorer), which "makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features". From PIE's website:

PIE currently has full or partial support for the following CSS3 features:

border-radius

box-shadow

border-image

multiple background images

linear-gradient as background image

Other features are under active development.

Note that this question is very similar and has a lot of other useful information and techniques.