size:100% 100%; doesn't work properly in Chrome
I'm using an svg image as a background. I'm trying to use CSS3's background-size: 100% 100%; but it doesn't seem to work, even in browsers which should support it (like Chrome).
If you look at this site you'll see the #special-post article (to the right/below the food image) with a red banner-looking background. Notice that as you shrink the window down, the height of the background image drops to retain it's proportions, rather then stretching, as I would like.
EDIT: I checked this on FireFox and it works correctly... so this appears to be a webkit issue.
EDIT: I checked this on Safari and it works! So it looks like my problem is specific to Chrome.
(PS: I'm familiar with this alternative solution, using an img tag, but I'd rather not use it.)
Here's a workaround:
Open your .svg file, find the <svg> tag at the beginning and add the following property inside it:
preserveAspectRatio="none"
Source: http://www.yootheme.com/support/question/6801?order=modified
It turns out this is a known bug in Chrome that is specific to svg background images. I'm running v 17.0.963.56, in case anyone cares, and you can track the bug here.
background-size: cover
Works across the board. Tested w/ Safari, Chrome, & FF.
链接地址: http://www.djcxy.com/p/89228.html上一篇: CSS：将图像拉伸至100％宽度