我正在尝试使用内联 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>";
屏幕:
大图:
小图:
当我在 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/