标签: cover

我正在使用该background-size属性获得完整的宽度和高度背景图像,但无法在纵向视图中将其完全覆盖在Nexus7平板电脑上的Chrome中.它只覆盖宽度而不是高度,即200px它下面有大约白色空间.但是,当我在桌面Chrome(或其他任何内容)和垂直监视器上查看网站以模拟纵向尺寸时,它没有任何问题.

有人有解决方案吗？

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

肖像屏幕截图:

我有一个项目,我正在使用固定的背景图像.它适用于除ios7之外的所有功能.在ipad上,背景图像被放大并且模糊.这是我正在使用的CSS代码 -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

这是实时页面的链接 - www.wdeanmedical.com

我错过了什么？

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.sized {
  height: 100%;
  position: relative;
  background: #eee;
  overflow:hidden;
  padding:0;
}
.sized iframe {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 320px) {
  height: 200%;
  top: -50%;
}
@media (min-width: 640px) {
  height: 180%;
  top: -40%;
}

<div class="sized">
  <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

当我在片段结果中得到一个cookie相同的原始错误时,这里是一个镜像:

https://jsfiddle.net/07Lffw5x/2/embedded/result/

[编辑]也许这是一个更好的演示,如果你比较这个,没有太大的区别......为什么？[/编辑]

我正在尝试为iframe重现背景大小的封面.

事情是它似乎重新缩放视频,仅适用于更大的尺寸,

题,

重新划分可以在每个断点生效吗？或者vimeo玩家可能会自己重新缩放？

还有其他人有这个问题吗？我创建网站为生,有些人使用css属性background-size: cover.大约一周前,所有具有此属性的网站都不再显示在Google Chrome中.(所有其他浏览器都运行正常.)还有其他人遇到过这种情况吗？它只是我的谷歌铬或做了一些改变？因为背景在大约一周前正常显示,我没有改变任何东西.他们刚刚停止正常展示,似乎无处不在......

很抱歉这个缺乏一个例子,但我觉得它很容易理解.

我的网站上有固定的背景,目前实现如下:

#background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #28305e;
    background-image: url(../images/background.jpg);
    background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    z-index: -10;
}

<div id="background"></div>

到目前为止,这在所有浏览器中都很棒,除了移动浏览器,它们在向下滚动时隐藏地址栏.隐藏地址栏时,视口会垂直展开,背景图像会自行调整大小.在这个特定的网站上,用户可以上下滚动,效果会分散注意力.

有关解决此问题或以不同方式实施背景的任何想法或策略？

我可以将整个东西包装在一个固定的容器中,并将overflow-y设置为滚动,这样可以防止地址栏被隐藏,但我不想这样做(Google Glass无法滚动浏览这些容器,哈哈...想在那里演示).

我一直在尝试考虑提供背景图像的东西:使用某种缓冲区覆盖功能,使其渲染大于视口,并且除非视口扩展到缓冲区之外,否则不会重新渲染,但我我不确定如何实现这一点.

编辑:我实际上已经实现了这一点,并在下面的答案中详细说明了该过程.但是,即使使用此缓冲区设置(将背景图像的高度扩展为比视口高度大60多个像素),在地址栏隐藏时,它仍会显示一个空白的背景颜色段,并且一旦显示停止滚动,它渲染其余的背景图像.

仍然在寻找一种方法来保持原生地址栏隐藏功能(现在已经在iOS 8中扩展到iPad上的iOS Safari),并且还有一个全屏幕背景图像,即使视口在隐藏地址时改变高度也始终呈现酒吧.开始怀疑我是否应该为所有浏览器提交错误报告...

在此先感谢您的帮助...

我试图理解-coverprofile cover.out选项go test,特别是文件的格式.

server.go例如,覆盖产生以下输出cover.out:

mode: set
github.com/cnuss/api_server/server.go:47.2,48.16 2 0
github.com/cnuss/api_server/server.go:52.2,53.16 2 0
github.com/cnuss/api_server/server.go:57.2,58.16 2 0
github.com/cnuss/api_server/server.go:62.2,63.16 2 0
github.com/cnuss/api_server/server.go:67.2,68.16 2 0
github.com/cnuss/api_server/server.go:72.2,73.16 2 0
github.com/cnuss/api_server/server.go:77.2,78.16 2 0

1. 每个不同的列是什么意思？
2. 输出格式是否为"标准"格式,例如gcov,xunit等,并且可转换为其他格式？

再次感谢!!

我发现此屏幕截图显示您可以将封面图像添加到mkv文件,其方式是使用Shark007+ 在Windows资源管理器中显示为该文件的图标icaros.
但是这些工具以非常糟糕的方式搞乱了系统.很多人都遇到了问题,我也非常后悔自己安装了它.我真的很高兴我的Windows再次启动...

无论如何,我怎么能以编程方式将封面图像添加到mkv文件中？
我是否需要在注册表中更改某些内容以使Windows显示它们？

我不是在寻找代码,我更需要寻找类似封面需要的格式以及我必须注入/插入/附加图像文件的字节以及可能导致标记的注册表项要显示的图像等

我有一个背景图像,它改变了窗口大小的大小,我需要在它上面放置一个元素,使它总是在相对于背景图像的相同位置.

怎么样!？

CSS

background:url("http://placehold.it/100x100") no-repeat center center fixed;
-webkit-background-size:"cover";
-moz-background-size:"cover";
-o-background-size:"cover";
background-size:"cover";

背景图像覆盖整个背景并随窗口改变大小,但通过叠加来保持比例.

编辑 - 2016年

我用纯CSS解决这个问题的方法是将元素放在中间,然后使用calc函数正确地偏移它.然后相应地调整它的大小我使用vmin值:

$offset-top: ...;
$offset-left: ...;

.element {
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + #{$offset-top}), calc(-50% + #{$offset-top}));
  width: 50vim; 
  height: 50vim;
}

我正在尝试为我的网站获得一个漂亮的全屏图像背景.它在我测试过的几乎所有浏览器(browsershots.org)中都运行良好,但在我的Android平板电脑上的Chrome中它没有按预期工作.你可以看到背景中有很多白色,它应该是所有图像.

链接: http ://test.socie.nl

CSS:

body {
    background: url(../../images/background/image1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

出乎意料的结果:

我尝试用mutagen编辑mp3标签.现在我让它设置像标题一样的标签.但APIC仍然无法运作.

我的代码:

from mutagen.mp3 import MP3
from mutagen.id3 import ID3, APIC, TT2, TPE1, TRCK, TALB, USLT, error
# ID3 info:
# APIC: picture
# TIT2: title
# TPE1: artist
# TRCK: track number
# TALB: album
# USLT: lyric

pic_file = 'cover.jpg' # pic file
audio = MP3('song.mp3', ID3=ID3)
try:
    audio.add_tags()
except:
    pass
audio.tags.add(APIC(
    encoding=3,
    mime='image/jpeg',
    type=3,
    desc='Cover Picture',
    data=open(pic_file, encoding='ISO-8859-1').read().encode()
))
audio.tags.add(TT2(encoding=3, text='title'))
audio.tags.add(TALB(encoding=3, text='album'))
#audio.tags.add(TPE1(encoding=3, text=item['artist'].decode('utf-8')))
#audio.tags.add(TRCK(encoding=3, text=str(track_num).decode('utf-8')))
#audio.tags.add(USLT(encoding=3, lang=u'eng', desc=u'desc', text=item['lyric'].decode('utf-8')))
audio.save()
ID3('song.mp3').save(v2_version=3)

我怎样才能让它发挥作用？

谢谢 :)

编辑:搞定了: …