在调整窗口大小时防止大小=覆盖的背景移动

时间:2016-09-01 01:19:56

标签: css css3

我有背景大小的背景:网页封面。有什么方法可以在调整窗口大小时阻止图像移动?或者这只是封面显示壁纸的限制?

是否有其他方法可以使用不同的方法获得相同的结果?

基本上我需要有一个覆盖整个屏幕的固定壁纸,并且需要处理智能手机和台式机。背景也不是一个抽象的图像,并且有一个偏离中心的“主题”,我想在移动时使用背景位置坐标来突出显示。

感谢任何帮助。

编辑:

感谢帮助,伙计们。我认为在background-size:cover的限制范围内,这个问题是不可能的,并且会在我的最后使用一些有创意的CSS。我想提出一些答案,看看是否有更“预期”的方法来做到这一点,但看起来我运气不好。

2 个答案:

答案 0 :(得分:0)

发生这种情况是因为background-size:cover的工作原理

<强>背景尺寸:覆盖

  

将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

如果没有您的示例代码,我只建议您使用background-size:contain代替

<强>背景尺寸:含有

  

将图像缩放到最大尺寸,使其宽度和高度都适合内容区域

点击此处background-size

让我知道是否有帮助

答案 1 :(得分:0)

只要所述background-image的包含元素高度足以滚动,您就可以使用background-attachment:fixed;background-position:fixed

以下代码段使用background-position:fixed演示了固定背景。为了完全覆盖视口,我使用了:background-size: containbackground-repeat:repeat。 `background-size:封面也是有效的,只要你不介意图像可能会被裁剪。

body {
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png)repeat fixed;
  background-position: fixed;
  background-size: contain;
}
.content {
  width: 200px;
  background: none repeat scroll 0 0 transparent;
}
<section class='content'>
  <p>Mauris a nunc occideritis me rectum. Videtur quod Ive facillimum, qui fecit vos. Potes me interficere, sine testibus et tunc manere in pauci weeks vel mensis vestigia Isai Pinkman et vos quoque illum occidere. Exercitium inutili option A. Videtur mihi
    quod autem est.</p>

  <p>Pergo coctione, et ego, et tu oblivisci Pinkman. Obliviscendum hoc unquam factum. Intelligamus hoc in sola SINGULTO multo aliter atque fructuosa negotium structura. Malo B. Option.</p>

  <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi praesidium.</p>

  <p>Suspicio? Bene ... tunc ibimus? Quis uh ... CONEXUS locus his diebus? Quisque semper aliquid videtur, in volutpat mauris. Nolo enim dicere. Vobis neque ab aliis. Ego feci memetipsum explicans. Gus mortuus est. Lorem opus habeo.</p>

  <p>Jackson Isai? Tu quoque ... A te quidem a ante. Vos scitis quod blinking res Ive 'been vocans super vos? Et conteram illud, et conteram hoc. Maledicant druggie excors. Iam hoc tu facere conatus sum ad te in omni tempore?</p>

  <p>Ludum mutavit. Verbum est ex. Et ... sunt occidat. Videtur quod est super omne oppidum. Quis transfretavit tu iratus es contudit cranium cum dolor apparatus. Qui curis! Modo nobis certamen est, qui non credunt at.</p>

  <p>Nonne vides quid sit? Tu es ... Jesse me respice. Tu ... blowfish sunt. A blowfish! Cogitare. Statura pusillus, nec sapientium panem, nec artificum. Sed predators facile prædam blowfish secretum telum non se habet. Non ille? Quid faciam blowfish, Isai.
    Blowfish quid faciat? In blowfish inflat, purus?</p>

  <p>Blowfish librantur in se quatuor, quinquies maior quam normalis, et quare? Quare id faciam? Ut terrorem facit, qui quid. Terrent! Ut alter, scarier pisces agminis off. Et quod tu es? Vos blowfish. Tu iustus in omnibus visio. Vides ... suus ' suus 'non
    aliud aerem. Nunc ... qui cum partibus blowfish Isai? Tu damnare ius. Vos blowfish. Dicere iterum. Dicere illam quasi velis eam. Es BLOWFISH!</p>
</section>