Question

我正在尝试使用内联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中不起作用。

下面是Logged 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>

我在做什么错？

Answer 1

将TraceLog Profiler component initialized successfully, process Example.exe .NET Runtime version 4.0.30319.0 - The profiler was loaded successfully. Profiler CLSID: '{f1260058-1a1f-4738-8be2-0bf9d3a64219}'. Process ID (decimal): 7196. Message ID: [0x2507]. TraceLog Profiler in process Example.exe experienced an internal failure. The accuracy of the collected trace may be affected. Application: Example.exe Framework Version: v4.0.30319 Description: The process was terminated due to an unhandled exception. Exception Info: System.AccessViolationException Stack: Faulting application name: Example.exe, version: 1.0.0.0, time stamp: 0x4ecfa3a5 Faulting module name: Microsoft.IntelliTrace.Profiler.11.0.0.SC.dll, version: 11.0.50522.1, time stamp: 0x4fbadafb Exception code: 0xc0000005 Fault offset: 0x0000000000040d24 Faulting process id: 0x1c1c Faulting application start time: 0x01d0ad8432baa357 Faulting application path: C:\Temp\Example.exe Faulting module path: C:\StandaloneCollector\Microsoft.IntelliTrace.Profiler.11.0.0.SC.dll Report Id: 709fb3dd-1977-11e5-9c79-240a644a5a8d Faulting package full name: Faulting package-relative application ID:更改为background。

同时删除background-image＆amp;将它们添加为

no-repeat center top fixed;

那应该可以解决你的问题。

Android WebView - 背景大小：封面不适用于小图片（图片doesen＆＃39; t scale）

1 个答案: