Android WebView - 背景大小 :cover not working for small images (Image doesen't scale)

标签 android html css webview

我正在尝试使用内联 css 创建简单的视差效果,方法是将它放在 Android WebView 中,如下所示,

String FEATURED_IMAGE = "<div style=\"background:url(" + mPostList.get(position).IMG_URL + ") no-repeat center top fixed;" +
            " min-height:200px;" +
            " -webkit-background-size:cover;" +
            " -moz-background-size:cover;" +
            " background-size:cover;" +
            " -webkit-box-shadow: inset 0 0 1000px #000000; \">"
            + "</div>";

屏幕:

大图:

Big Image shown without any problem

小图:

enter image description here

当我在 codePen 上运行上面的代码时,它没有任何问题,但它在 Android WebView 中不起作用。

下面是记录的 FEATURED_IMAGE 字符串,

I/FEATURED_IMAGE﹕ <div style="background:url(http://2.bp.blogspot.com/_fWuGPZ0ArA4/S6818iPuBCI/AAAAAAAAAlo/HSQOBcdU7nk/s200/120px-Crocus_imperatii_subsp__suaveolens1a_UME.jpg) no-repeat center top fixed; min-height:200px; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; -webkit-box-shadow: inset 0 0 1000px #000000; "></div>

我也试过,

background-size:100% 100%; and
background-size:contain;

编辑:(在 WebView 中加载的完整代码如下..)

<body style="margin:0; padding:0">
<div style="background-image:url(http://2.bp.blogspot.com/_fWuGPZ0ArA4/S6818iPuBCI/AAAAAAAAAlo/HSQOBcdU7nk/s200/120px-Crocus_imperatii_subsp__suaveolens1a_UME.jpg); background-repeat:no-repeat; background-position:center top; background-attachment:fixed; min-height:200px; -webkit-background-size:cover; -webkit-box-shadow: inset 0 0 1000px #000000; "></div>
<div style = "background:#F44336; padding:10px 0 10px 10px;">
    <h3 style="color:#ffffff">Grow Crocus Flowers - Welcome to Spring.</h3>
    <p style="color:#ffffff">2 Comments / 2010-03-28</p>
    <p style="color:#ffffff">Posted By - 
        <a style="color:#ffffff" href="http://www.blogger.com/profile/04668325431299702401">terry blackburn</a>
    </p>
</div>
<div style="padding:10px">
    <div dir="ltr" style="text-align: left;" trbidi="on">
        <a href="http://2.bp.blogspot.com/_fWuGPZ0ArA4/S6818iPuBCI/AAAAAAAAAlo/HSQOBcdU7nk/s1600/120px-Crocus_imperatii_subsp__suaveolens1a_UME.jpg">
            <img style="margin-top:10px; margin-bottom:10px; width: 100%;" alt="" border="0" src="http://2.bp.blogspot.com/_fWuGPZ0ArA4/S6818iPuBCI/AAAAAAAAAlo/HSQOBcdU7nk/s200/120px-Crocus_imperatii_subsp__suaveolens1a_UME.jpg" id="BLOGGER_PHOTO_ID_5453636987870118946" style="cursor: hand;   margin: 0px 10px 10px 0px; width:100%" />
        </a>
        <br />
I was strolling through our local park today basking in the Sunshine. The clocks went forward at midnight last night and there was a real feel of Spring in the air. A cold gusting wind was blowing, but nevertheless, the sight of the Sun in a blue, almost cloudless sky, raised my spirits enormously. It has been a long, dark, cold winter, (whatever happened to global warming!) and we in the North of England desperately need some warm weather to cheer us up.
        <br />
Trudging along, my eye was attracted to a splash of colour dotted about on the grass and on further inspection, this turned out to be a carpet of Crocuses, in a profusion of yellow, purple and white colours. God must have been having a good day when he created the Crocus. There is nothing more guaranteed to raise the spirits than the sight of a profusion of Crocuses spreadeagled across the grass. I just love the seemingly undisciplined way they grow - no straight lines, just a myriad of colours waving at me in the wind. It is as though someone has taken a paintbox of colours and sprinkled them haphazardly in a carpet across the grass.
        <br />
The Crocus, or Saffron is one of the Lily family, and is a hardy perennial plant which is believed to have originated in the Mediterranean area where it was first harvested, so legend has it, on the Island of Crete! As one of the first flowers to bloom in spring, crocuses are of course immensely popular. The plants grow from corms and their cup-shaped, solitary, "salverform" flowers taper off into a narrow tube. Their flowers and leaves are protected from Winter snow and frosty conditions by a waxy cuticle and it is a wonderful sight to see them pushing their way up through a sprinkling of snow. 
        <br />
Cultivation of the plant is no trouble at all, as they can be left very much to themselves to develop, although they do need regular cutting back as they seed abundantly. They thrive in light, sandy, gritty, well drained loam, flowering usually at the beginning of March in the UK. They should be planted in a sunny position, although some species do prefer shadier sites. The corms should be planted about an inch and a half to two inches deep.
        <br />
So if you want to create a brilliant and uplifting display in your garden for next early Spring, take my advice and plant Crocus flowers, you won't be sorry!
        <br />
        <br />
I hope you like this rather whimsical article. If you do, then why not share your thoughts with me... always interested to receive your thoughts, especially if they are positive ones.
    </div>
</div>

我做错了什么?

最佳答案

background 更改为 background-image

同时删除 no-repeat center top fixed; 并将它们添加为

background-repeat:no-repeat:
background-position:center top;
background-attachment:fixed;

这应该可以解决您的问题。

关于Android WebView - 背景大小 :cover not working for small images (Image doesen't scale),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31002421/

相关文章:

java - Android 应用程序位图的替代方案

安卓 : Custom DialogFragment so slow to display

html - 布局 80% 的显示 :table

html - Bootstrap : how show panel over google maps

css - 倾斜时内阴影出现锯齿

android - http post setEntity 使用改造

android - 如何在按钮上显示多行文本

javascript - WinRT Metro 风格的 HTML5/JavaScript 应用程序是如何打包和保护的

javascript - 删除列上的多个光滑轮播箭头

javascript - Bootstrap Carousel 不工作并干扰其他 jquery。这是为什么?